我正在使用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...
这个运行得很好，但是what I want to do next is dynamically generate a long list of column classes separated by commas based on the number of $columns chosen-例如，我希望它看起来是这样的:
.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语法有些困惑.
有没有人有什么 idea ？