megclaypool
5/7/2018 - 2:44 PM

SCSS rbga() Function Awesome Sauce

SCSS rbga() Function Awesome Sauce.

The rgba function can take a color and an opacity as its arguments. You can plug in a variable(!) as the color, including colors defined using hex! This is excellent for buttons, since this means that you can bot

rgba Awesome Sauce.md
content_copyfile_download
  • Rendered
  • Source
$blue: #4900ff;

.some_class {
  background-color: rgba($blue, 1);
  
  &:hover {
    background-color: rgba($blue, .5);
  }
}

Codepen example