"use this SASS mixin" 在 Material 设计组件的上下文中是什么意思？

Question

我正在使用 Material Design Components for Web library. I have a tab component，我想更改 underline-color 的。

说明说

To customize the tab indicator, use the following mixins.

然后它给出一个table。对于下划线颜色，它说

underline-color($color) Customizes the color of the underline.

所以，我在 scss 文件中尝试以下内容：

  .mdc-tab-indicator {
      underline-color(red);
  }

我编译 sass（使用 dart-sass）并得到以下错误

Error: expected "{".

它说这是一个"Sass Mixin." 所以，我看了一下SASS documentation on mixins。我没有看到遵循语法 mixin-name($variable) 的任何内容。那里的一切看起来都像

@mixin reset-list {
  margin: 0;
}

用花括号，而不是圆括号。但是，错误说它需要花括号，而且显然 @ 符号是必需的。所以，我尝试：

  .mdc-tab-indicator {
      @underline-color(red);
  }

这不会引发错误，但不会导致下划线颜色发生变化。我尝试遵循 sass 文档的语法：

  .mdc-tab-indicator {
      @underline-color(red){};
  }

没有错误，但没有颜色变化。我尝试更好地匹配语法：

  .mdc-tab-indicator {
      @mixin underline-color(red){};
  }

这会引发

Error: expected ")".

我试试

  .mdc-tab-indicator {
      @mixin underline-color(red);
  }

同样的错误。

我不明白 material 组件文档的说明。 "To customize the tab indicator, use the following mixins." 是什么意思？如何更改 Material 设计组件选项卡指示器的下划线颜色？

Answer 1

Mixins 是使用@mixin at 规则定义的，写成@mixin { ... } 或@mixin name() { ... }。 mixin 的名称可以是任何 Sass 标识符，并且它可以包含除顶级语句之外的任何语句。它们可用于封装可放入单个样式规则中的样式；它们可以包含自己的样式规则，这些规则可以嵌套在其他规则中或包含在样式表的顶层；或者它们可以只用于修改变量。

使用 @include at 规则将 Mixins 包含到当前上下文中，该规则写为 @include 或 @include ()，其中包含 mixin 的名称。

因此，要包含您的特定混合使用：

.mdc-tab-indicator {
      @include underline-color(red);
  }

查看更多信息 https://sass-lang.com/documentation/at-rules/mixin

"use this SASS mixin" 在 Material 设计组件的上下文中是什么意思？

What does "use this SASS mixin" mean in the context of Material Design Components?

sass

gwt-material-design

scss-mixins