[解決済み] カンマで区切られたクラスのリストを動的に生成するには？

質問

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の構文と同様に、ここのロジックにも少し行き詰っています。

どなたかアイデアをお持ちではないでしょうか？

どのように解決するのですか？

をご覧になってはいかがでしょうか？ @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;
}

ドキュメントにある @extend .