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 構文に少しこだわっています。
誰にもアイデアはありますか?