如何将 scss 文件中的 mixin $variable 分配给 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

实际上很奇怪，因为很久以前我很生气为什么我的 scss 无法正常工作.. 我认为这完全与服务器设置有关：S