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

Question

我正在使用 Material Design Components for Web图书馆。我有一个 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 组件文档在说明什么。当它说“要自定义选项卡指示器，请使用以下混合”时是什么意思。 ?如何更改 Material Design 组件选项卡指示器的下划线颜色？

Answer 1

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

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

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

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

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