Using the SASS rgba function in a CSS variable context?

How do we get SASS rgba to turn rgba(#4caf50, 0.1) into rgba(76, 175, 80, 0.1) when the context is the value side of the CSS variable declaration?

For my clarity here's an example:

$green: #4caf50;

$green-rgba: rgba($green, 0.1);
@debug $green-rgba; // rgba(76, 175, 80, 0.1)


The @debug statement will log rgba(76, 175, 80, 0.1), which is correct.

However if we try this:

test {
--mat-mdc-button-ripple-color: rgba(#4caf50, 0.1);
}


The compiled result is:

test {
--mat-mdc-button-ripple-color: rgba(#4caf50, 0.1);
}


Thoughts?

Continue reading...