CSS SCSS/SASS：如何动态生成用逗号分隔的类列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19087811/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SCSS/SASS: How to dynamically generate a list of classes with commas separating them
提问by Josh
I'm working with the SCSS syntax of SASS to create a dynamic grid system but I've hit a snag.
我正在使用 SASS 的 SCSS 语法来创建动态网格系统，但我遇到了障碍。
I'm trying to make the grid system completely dynamic like this:
我试图让网格系统像这样完全动态：
$columns: 12;
then I create the columns like this:
然后我创建这样的列：
@mixin col-x {
@for $i from 1 through $columns {
.col-#{$i} { width: $column-size * $i; }
}
}
Which outputs:
哪些输出：
.col-1 {
width: 4.16667%;
}
.col-2 {
width: 8.33333%;
}
etc...
This works well but 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- e.g I want it to look like this:
这很有效，但我接下来要做的是根据选择的 $columns 的数量动态生成一长串由逗号分隔的列类- 例如，我希望它看起来像这样：
.col-1,
.col-2,
.col-3,
.col-4,
etc... {
float: left;
}
I've tired this:
我已经厌倦了：
@mixin col-x-list {
@for $i from 1 through $columns - 1 {
.col-#{$i}-m { float: left; }
}
}
but the output is this:
但输出是这样的：
.col-1 {
float: left;
}
.col-2 {
float: left;
}
etc...
I'm a little stuck on the logic here as well as the SCSS syntax required to create something like this.
我对这里的逻辑以及创建这样的东西所需的 SCSS 语法有点卡住了。
Does anyone have any ideas?
有没有人有任何想法？
Thanks
谢谢
回答by D.Alexander
I think you may want to take a look at @extend. If you set that up something like:
我想你可能想看看@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;
It should render in your css file as:
它应该在您的 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;
}
Hope this helps!
希望这可以帮助！
回答by davidtheclark
There's also a way to do what your question is specifically asking for: generate (and use) a list of classes with commas separating them.D.Alexander's response totally works in your situation, but I'm posting this alternative in case there's another use case for someone looking at this question.
还有一种方法可以完成您的问题具体要求的内容：生成（并使用）用逗号分隔的类列表。D.Alexander 的回答完全适用于您的情况，但我发布了此替代方案，以防有人查看此问题的另一个用例。
Here's a Pen demonstrating: http://codepen.io/davidtheclark/pen/cvrxq
这是一个 Pen 演示：http: //codepen.io/davidtheclark/pen/cvrxq
Basically, you can use Sass functionsto achieve what you want. Specifically, I'm using appendto add classes to my list, separated by commas, and unquoteto avoid compilation conflicts with the period in the classnames.
基本上，你可以使用Sass 函数来实现你想要的。具体来说，我使用append将类添加到我的列表中，用逗号分隔，并unquote避免与类名中的句点发生编译冲突。
So my mixin ends up looking like this:
所以我的 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;
}
}
Hope that helps somebody.
希望能帮助某人。
回答by b3wii
thnx to @davidtheclark here is a more generic version:
谢谢@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
}
}
Use it like this:
像这样使用它：
@include attr-x('margin-left', 6, 5, 'px');
//or
@include attr-x('width');
The result looks like this:
结果如下所示：
.margin-left5 {
margin-left: 5px; }
.margin-left10 {
margin-left: 10px; }
...
.margin-left30 {
margin-left: 30px; }
.width10 {
width: 10%; }
.width20 {
width: 20%; }
...
.width100 {
width: 100%; }
