SCSS / SASS：如何dynamic生成一个用逗号分隔的类的列表

我正在用SASS的SCSS语法来创build一个dynamic的网格系统，但是我遇到了一个麻烦。

我正在尝试使网格系统完全dynamic，如下所示：

$columns: 12; 

然后我创build这样的列：

 @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... 

这个效果很好，但是我接下来要做的是dynamic地生成一个由逗号分隔的很长的列类，这个列以所select的$列的数量为基础，例如我希望它看起来像这样：

 .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... 

我有点卡在这里的逻辑，以及创build类似这样的SCSS语法。

有没有人有任何想法？

谢谢

Answer 1

我想你可能想看看@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; } 

@扩展在文档中 。

希望这可以帮助！

Answer 2

还有一种方法来做你的问题具体要求： 生成（和使用）用逗号分隔它们的类的列表。 D.亚历山大的回应完全适用于您的情况，但是我发布了这个备选scheme，以防有人看到这个问题。

这是一个笔显示： http : //codepen.io/davidtheclark/pen/cvrxq

基本上，你可以使用Sassfunction来实现你想要的。 具体来说，我使用append将类添加到列表中，并用逗号分隔，并unquote引号以避免与类名称中的句点发生编译冲突。

所以我的mixin最终看起来像这样：

 @mixin col-x { $col-list: null; @for $i from 1 through $columns { .col-#{$i} { width: $column-size * $i; } $col-list: append($col-list, unquote(".col-#{$i}"), comma); } #{$col-list} { float: left; } } 

希望能帮助别人。

Answer 3

thnx to @davidtheclark这里是一个更通用的版本：

 @mixin attr-x($attr, $attr-count: 10, $attr-steps: 10, $unit: '%') { $attr-list: null; @for $i from 1 through $attr-count { $attr-value: $attr-steps * $i; .#{$attr}#{$attr-value} { #{$attr}: #{$attr-value}#{$unit}; } $attr-list: append($attr-list, unquote(".#{$attr}-#{$attr-value}"), comma); } #{$attr-list} { //append style to all classes } } 

像这样使用它：

 @include attr-x('margin-left', 6, 5, 'px'); //or @include attr-x('width'); 

结果如下所示：

 .margin-left5 { margin-left: 5px; } .margin-left10 { margin-left: 10px; } ... .margin-left30 { margin-left: 30px; } .width10 { width: 10%; } .width20 { width: 20%; } ... .width100 { width: 100%; }