Using the SASS rgba function in a CSS variable context?

Question

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?

Answer 1

OK - After studying the source for the Angular Material button the ripple code does it like this and it works:

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