Setting opacity on $primary-color in sass

SassOpacity

Sass Problem Overview


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?

Sass Solutions


Solution 1 - Sass

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionFuriView Question on Stackoverflow
Solution 1 - SassZach SaucierView Answer on Stackoverflow