0

In my component.scss file, I have got mixin variable, I'm trying to set the ripple color for a div element.

if I set a direct color value eg: [matRippleColor]="red" in the HTML, The ripple color is applied and working.

however, if I give the mixin variable's name or a scss class name to the [matRipplecolor], the ripple color is not applied.

component.scss flie

@import '~@angular/material/theming';
@mixin dashboard-component-theme($bg-ripple) {

    .rippleCOLOR {
        background-color: $bg-ripple;
        color: $bg-ripple;
    }
}

component.html flie

<!-- WORKING: Direct Color value -->
<div matRipple [matRippleColor]="red"> Some text </div>


<!-- NOT WORKING: mixin variable -->
<div matRipple [matRippleColor]="$bg-ripple"> Some text </div>

<!-- NOT WORKING: scss class name -->
<div matRipple [matRippleColor]="rippleCOLOR"> Some text </div>

need to set the ripple color from a mixin variable in the scss file

Pradeep
  • 581
  • 3
  • 11
  • 19
  • 1
    AFAIK, you can only pass a valid CSS color code. (For example, you can use `red` or `rgba(200, 200, 200, 1)`.) – Edric Jan 17 '19 at 05:54

1 Answers1

1

you can't use scss in HTML document/element, since you need to compile it into css..

some youtube tutorial below.. scss install and compile

was actually wierd, as i was so angry long ago why my scss is not working.. i thought it was all about server setup :S

Joe Lorthemier Rauzes
  • 83
  • 1
  • 1
  • 8