4

I am using the Material Design Components for Web library. I have a tab component that I'd like to change the underline-color of.

The instructions say

To customize the tab indicator, use the following mixins.

Then it gives a table. For underline color, it says

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

So, I try in my scss file, the following: 

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

I compile my sass (using dart-sass) and get the following error

Error: expected "{".

It says this is a "Sass Mixin." So, I look at the SASS documentation on mixins. I see nothing that follows the syntax mixin-name($variable). Everything in there looks like 

@mixin reset-list {
  margin: 0;
}

with curly braces, not parentheses. But, the error said it was expecting a curly brace, and also apparently the @ symbol is required. So, I try:

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

This doesn't throw an error, but doesn't cause the underline color to change. I try to follow the syntax of the sass docs:

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

No error, but no color change. I try to match the syntax better:

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

This throws 

Error: expected ")".

I try

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

Same error.

I don't understand what the material components documentation is instructing. What does it mean when it says "To customize the tab indicator, use the following mixins." ? How can I change the underline color of the Material Design Component tab indicator?

4

1 回答 1

5

Mixin 是使用@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上查看更多信息

于 2020-03-03T17:05:39.483 回答