Question

在这个SCSS代码中，我正在使用mixin btn-structure并扩展%red-color以获取与我的期望相反的一个类下的所有声明SCSS为同一个类输出两个单独的规则，如下面的输出所示：

%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输出属于同一类的两个单独的规则如果属于一个类，如何让SASS输出一个规则。

Answer 1

这是Sass @extend的实际行为和用例。

说明

要说清楚，请按照以下更新代码

%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{
  @extend %red-color;
  @include btn-structure($text-case: 'uppercase', $decoration: underline);
}

.test-class{
  @extend %red-color;
  @include btn-structure($text-case: 'uppercase', $decoration: underline);
}

编译为

.link-btn, .test-class {
  color: red;
}

.link-btn {
  display: inline-block;
  text-decoration: underline;
  text-transform: "uppercase";
}

.test-class {
  display: inline-block;
  text-decoration: underline;
  text-transform: "uppercase";
}

正如您所看到的，@extend用于“将一组CSS属性从一个选择器共享到另一个选择器”，这些属性可以组合在一起（.link-btn, .test-class）。然而，@include用于插入所需的样式，而不是棒棒棒。

解决方案

根据您的要求，您可以使用@include并声明如下所示的mixin @mixin red-color，

%red-color{
  color: red
}

@mixin 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 red-color;
  @include btn-structure($text-case: 'uppercase', $decoration: underline);
}

输出

编译的css将是，

.link-btn {
  color: red;
  display: inline-block;
  text-decoration: underline;
  text-transform: "uppercase";
}

希望这有帮助。

SASS使用extend和mixins为同一类生成两个单独的规则

1 个答案:

说明

解决方案

输出