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?
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