Повторяемые занятия в Ангуляр 6

Question

Когда я делаю пакет классов, я использую 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;
  }

Но, если я использую% классы, при запуске локального сайта слишком много повторяющихся классов:

Слишком много одинаковых классов

Это очень раздражает, да, после того, как они уменьшатся, они исчезнут, но теперь они действительно мешают. Что я могу с этим сделать?

UPD Я знаю, если я изменю%name-of-class на

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

это поможет, но я не хочу этого делать, потому что код не будет таким элегантным)

UPD2 И я не могу использовать циклы для изготовления миксинов из массива: https://github.com/sass/sass/issues/626