我正在使用SSS的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...
这很好，但我想做的下一步是动态生成一个列表类的长列表，以逗号分隔，基于选择的$列数 – 例如我想它看起来像这样：
.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;
}
希望这可以帮助！
