I have a series of scss variables representing colors re used throughout my app, like so:

$first-color: #00755E

I also have colors that are the same as this first color, but it's their hex values with opacity. Like this one here is $first-color with 0.05 opacity.

$first-with-opacity: #F2F8F7

What I would like to be able to do is to re use this $first-color variable in the $first-with-opacity variable, so that if this $first-color ever changes, I don't have to also change $first-with-opacity to match that new color with the same opacity.

Due to limitations within the app, I can't use rgba values in this and other scenarios. What I'd like to know is, is it possible for me to re use that variable ($first-color) and attach an opacity value to it, without using rgba?

To be clear, what's below will NOT work:

$first-with-opacity: rgba($color: $first-color, alpha: 0.05) //this solution will not work in this scenario

CodePudding user response：

Here you go...

WRONG:

$first-with-opacity: rgba($color: $first-color, alpha: 0.05);

CORRECT:

$first-with-opacity: rgba($first-color, 0.05);