我正在使用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语法有些困惑。
有人有什么想法吗?
谢谢