Question

当我制作一堆类时，我使用混合类和％类，如在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;
  }

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

Too much same classes

这很烦人，是的，在精简产品之后，它们会消失，但现在它们确实在干扰。我能用它做什么？

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

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

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

UPD2而且我无法使用循环来从大量对象中生成混合包：https://github.com/sass/sass/issues/626

Angular 6中的可重复类

0 个答案: