Using SASS rgba functions in the context of CSS variables?

Question

How do we get SASS rgba to convert rgba(#4caf50, 0.1) to rgba(76, 175, 80, 0.1) when the context is CSS When is the value side of a variable declared?

For clarity, here is 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.

But if we try this:

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

The compilation result is:

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

idea?

Answer 1

Ok - after looking into the source code of the Angular Material button, the ripple code does this and it works:

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