How do we get SASSrgbato 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
@debugstatement 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:
--mat-mdc-button-ripple-color: #{rgba($color, 0.1)};