0

在这个 SCSS 代码中，我使用 mixinbtn-structure和 extend%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 输出一个规则。

4

1 回答 1

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

希望这可以帮助。

于 2018-03-12T07:51:40.857 回答