在 Material Design Components 的上下文中，“使用这个 SASS mixin”是啥意思？

Posted 2023-03-07

【中文标题】在 Material Design Components 的上下文中，“使用这个 SASS mixin”是啥意思？

【英文标题】：What does "use this SASS mixin" mean in the context of Material Design Components?在 Material Design Components 的上下文中，“使用这个 SASS mixin”是什么意思？

【发布时间】：2020-06-09 19:11:43

【问题描述】：

我正在使用Material Design Components for Web 库。我有一个tab component，我想更改它的underline-color。

说明书说

要自定义标签指示器，请使用以下 mixins。

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

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

所以，我在我的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 Design Component 选项卡指示器的下划线颜色？

【参考方案1】：

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

使用@include at-rule 将mixin 包含到当前上下文中，该规则写成@include 或@include ()，并带有被包含的mixin 的名称。

所以，要包括您的特定 mixin 使用：

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

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