1

当我制作类包时，我使用 mixins 和 % 类，就像在 vars 中这样：

@mixin margin($value) {
    margin-top: $value;
    margin-bottom: $value;
    &-top {
        margin-top: $value;
    }
    &-bottom {
        margin-bottom: $value;
    }
}

%margin-none {
    @include margin(0px);
}
%margin-nano {
    @include margin(8px);
}

然后我可以以相同的名称扩展它以在现场使用它：

$margins: (
    'none',
    'nano',
    'tiny',
    ...
);

@each $m in $margins {
    .margin-#{$m} {
        @extend %margin-#{$m};
        &-top {
            @extend %margin-#{$m}-top;
        }
        &-bottom {
            @extend %margin-#{$m}-bottom;
        }
    }   
}

或在组件中：

@import '../../../vars';

  .profit_column {
      @extend %margin-small-top;
      @extend %margin-small-bottom;
  }

但是，如果我使用 % 类，当我运行本地站点时会有太多可重复的类：

太多相同的课程

这很烦人，是的，在 prod 上缩小后它们会消失，但现在它们真的会干扰。我能用它做什么？

UPD 我知道，如果我将 %name-of-class 更改为

@mixin-prepend1
@mixin-prepend2
@mixin-prepend3

它会有所帮助，但我不想这样做，因为代码不会那么优雅）

UPD2 我不能使用循环来从大量混合中：https ://github.com/sass/sass/issues/626

4

0 回答 0