この SCSS コードでは、以下の出力に示すように、SCSS が同じクラスに対して 2 つの別個のルールを出力するという私の予想に反して、1 つのクラスの下ですべての宣言を取得するために mixinbtn-structure
と extendを使用しています。%red-color
%red-color{
color: red }
@mixin btn-structure
($text-case: null, $text-shadow: null, $decoration: none ){
display: inline-block;
text: {
decoration: $decoration;
transform: $text-case;
shadow: $text-shadow }
}
.link-btn{
@include btn-structure($text-case: 'uppercase', $decoration: underline);
@extend %red-color
}
出力
.link-btn {
color: red;
}
.link-btn {
display: inline-block;
text-decoration: underline;
text-transform: "uppercase";
}
SASS が同じクラスに属する 2 つの個別のルールを出力することを望まないため、それが 1 つのクラスに属する場合に SASS に 1 つのルールを出力させる方法を教えてください。