How do we get SASSrgba
to convertrgba(#4caf50, 0.1)
torgba(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 logrgba(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?
Ok - after looking into the source code of the Angular Material button, the ripple code does this and it works: