我正在使用SSS的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...

这很好，但我想做的下一步是动态生成一个列表类的长列表，以逗号分隔，基于选择的$列数 – 例如我想它看起来像这样：

.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语法创建这样的东西。

有没有任何想法？

谢谢

$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;

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