在材料设计组件的上下文中，“使用这个 SASS mixin”是什么意思？

Question

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?

Answer 1

Mixins are defined using the @mixin at-rule, which is written @mixin { ... } or @mixin name() { ... }. A mixin's name can be any Sass identifier, and it can contain any statement other than top-level statements. They can be used to encapsulate styles that can be dropped into a single style rule; they can contain style rules of their own that can be nested in other rules or included at the top level of the stylesheet; or they can just serve to modify variables.

Mixins are included into the current context using the @include at-rule, which is written @include or @include (), with the name of the mixin being included.

So, to include your specific mixin use:

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

See more at https://sass-lang.com/documentation/at-rules/mixin