0

この 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 つのルールを出力させる方法を教えてください。

4

1 に答える 1