如何将scss文件中的mixin $变量赋值给html元素的类

Question

在我的component.scss文件中，我有mixin变量，我正在尝试为div元素设置波纹颜色。

如果我设置了一个直接的颜色值，例如：HTML中的[matRippleColor] =“red”，则会应用波纹颜色并正常工作。

但是，如果我将mixin变量的名称或scss类名称赋予[matRipplecolor]，则不会应用波纹颜色。

component.scss文件

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

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

component.html文件

<!-- 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>

需要从scss文件中的mixin变量设置波纹颜色

Answer 1

你不能在HTML文档/元素中使用scss，因为你需要将它编译成css ..

下面有一些youtube教程.. scss install and compile

实际上很奇怪，因为我很久以前很生气为什么我的css不工作..我认为这完全是关于服务器设置：S