SCSS / SASS：如何动态生成包含逗号的类列表

Question

我正在使用SASS的SCSS语法来创建动态网格系统，但是遇到了麻烦。我试图像这样使网格系统完全动态：$columns: 12;然后我创建像这样的列：@mixin col-x {  @for $i from 1 through $columns {  .col-#{$i} { width: $column-size * $i; }  }}哪个输出：.col-1 {    width: 4.16667%;  }.col-2 {    width: 8.33333%;}etc...这很好用，但是我接下来要做的是根据选择的$ columns的数目动态生成一列由逗号分隔的长列类 -例如，我希望它看起来像这样：.col-1,.col-2,.col-3,.col-4, etc... {float: left;}我已经累了：@mixin col-x-list {  @for $i from 1 through $columns - 1 {  .col-#{$i}-m { float: left; }  }}但是输出是这样的：.col-1 {  float: left;}.col-2 {  float: left;}etc...我对这里的逻辑以及创建这样的东西所需的SCSS语法有些困惑。有人有什么想法吗？

Answer 1

我想您可能想看看@extend。如果您将其设置为：

$columns: 12;

%float-styles {

  float: left;

}

@mixin col-x-list {

  @for $i from 1 through $columns {

      .col-#{$i}-m { @extend %float-styles; }

  }

}

@include col-x-list;

它应该在您的css文件中呈现为：

.col-1-m, .col-2-m, .col-3-m, .col-4-m, .col-5-m, .col-6-m, .col-7-m, .col-8-m, .col-9-m, .col-10-m, .col-11-m, .col-12-m {

  float: left;

}

Answer 2

thnx到@davidtheclark是一个更通用的版本：

@mixin attr-x($attr, $attr-count: 10, $attr-steps: 10, $unit: '%') {

    $attr-list: null;

    @for $i from 1 through $attr-count {

        $attr-value: $attr-steps * $i;

        .#{$attr}#{$attr-value} {

            #{$attr}: #{$attr-value}#{$unit};

        }

        $attr-list: append($attr-list, unquote(".#{$attr}-#{$attr-value}"), comma);

    }

    #{$attr-list} {

        //append style to all classes

    }

}

像这样使用它：

@include attr-x('margin-left', 6, 5, 'px');

//or

@include attr-x('width');

结果看起来像这样：

.margin-left5 {

  margin-left: 5px; }

.margin-left10 {

  margin-left: 10px; }

...

.margin-left30 {

  margin-left: 30px; }

.width10 {

  width: 10%; }

.width20 {

  width: 20%; }

...

.width100 {

  width: 100%; }