在 Material Design 组件的上下文中，“使用这个 SASS mixin”意味着什么？

Question

我正在使用Web 库的材料设计组件。我有一个我想更改的选项卡组件underline-color。

说明说

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

然后它给出了一张桌子。对于下划线颜色，它说

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

因此，我在我的scss文件中尝试以下内容：

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

我编译我的 sass （使用dart-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);
  }

同样的错误。

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

Answer 1

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n