The rgba function

If you want to convert an existing color value (defined as either a variable or hex value) to an RGBA value (including an alpha layer for transparency), use the rgba function:

background-color: rgba(red,.9);  

This will produce following CSS:

background-color: rgba(255, 0, 0, 0.9);

The two arguments needed are the color and then the value of the alpha layer (0 is entirely transparent, 1 is entirely opaque, .5 is halfway between the two).

From a practical point of view, it's similar to transparentize/fade-out and opacify/fade-in.

Note

Be aware that unless the value passed for the alpha layer is less than 1, Sass will compile the resultant color as a hex value or a named CSS color.

Get Sass and Compass for Designers now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.