Setting opacity on $primary-color in sass

Furi picture Furi · Jan 17, 2014 · Viewed 25k times · Source

Is there an option to include opacity on the colors you define to be your primary/secondary colors in the sass variables? In the fashion of the lighten($color, amount) function?

Answer

Zach Saucier picture Zach Saucier · Jan 17, 2014

You can use rgba, i.e.

$primary: rgba(20,20,20, .5);

It works for hex values as well

$primary: rgba(#4B00B5, .3);

You can also set the opacity of colors based on a variable value. For example:

$primary-color: #a61723;
....
color: rgba($primary-color, .5);

Demo