什么是“使用这个 SASS mixin"?在材料设计组件的上下文中是什么意思? [英] What does "use this SASS mixin" mean in the context of Material Design Components?

问题描述

我正在使用 Material Design Components for Web 库.我有一个 标签组件 我想改变 underline-color 的.

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.

说明说

要自定义选项卡指示器，请使用以下混合.

To customize the tab indicator, use the following mixins.

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

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

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

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

所以，我在我的 scss 文件中尝试以下内容:

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

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

我编译我的 sass(使用 dart-sass)并得到以下错误

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

Error: expected "{".

它说这是一个Sass Mixin".所以，我查看了 SASS 关于 mixins 的文档.我看不到任何遵循语法 mixin-name($variable) 的内容.里面的一切看起来像

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);
  }

这不会引发错误，但不会导致下划线颜色发生变化.我尝试遵循 sass 文档的语法:

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){};
  }

这会抛出

Error: expected ")".

我试试

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

同样的错误.

我不明白材料组件文档在说明什么.当它说要自定义选项卡指示器，请使用以下混合"时是什么意思.?如何更改 Material Design 组件选项卡指示器的下划线颜色?

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?

推荐答案

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

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.

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

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.

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

So, to include your specific mixin use:

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

在 https://sass-lang.com/documentation/at- 上查看更多信息规则/混合

这篇关于什么是“使用这个 SASS mixin"?在材料设计组件的上下文中是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！