在Material Design Components的背景下，“使用此SASS mixin”是什么意思？

Question

我正在使用Material Design Components for Web库。我有一个选项卡组件，我想更改其underline-color。

说明如下：

要自定义选项卡指示器，请使用以下mixin。

然后给出了一个表格。对于下划线颜色，它说：

underline-color($color) 自定义下划线的颜色。

因此，在我的scss文件中，我尝试使用以下代码：

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

我使用 dart-sass 编译我的 sass，结果出现了以下错误：

Error: expected "{".

它说这是一个“Sass Mixin”。那么，我查看有关mixins的SASS文档。我没有看到任何遵循语法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);
  }

出现了相同的错误。

我不明白"材料组件文档"正在指导什么。当它说“要自定义选项卡指示器，请使用以下mixin”时，这是什么意思呢？我该如何更改Material Design Component选项卡指示器的下划线颜色呢？

- Caleb Jay

Answer 1

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

Mixins 可以被包含到当前上下文中，使用 @include at-rule，写作 @include 或者 @include ()，并指定所要包含的 mixin 名称。

因此，要包含您特定的 mixin，请使用：

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

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

- Matt Norrie