我正在使用 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 语法有点坚持。
有没有人有任何想法?