如何动态生成用逗号分隔的类列表? [英] How to dynamically generate a list of classes with commas separating them?
问题描述
我正在使用SASS的SCSS语法来创建动态网格系统,但是遇到了麻烦.
I'm working with the SCSS syntax of SASS to create a dynamic grid system but I've hit a snag.
我正在尝试使网格系统完全动态:
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; }
}
}
哪个输出:
.col-1 {
width: 4.16667%;
}
.col-2 {
width: 8.33333%;
}
etc...
这很好用,但是接下来我要做的是根据所选择的$ columns的数目动态生成一列由逗号分隔的长列类-例如,我希望它看起来像这样:
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:
.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语法有些困惑.
I'm a little stuck on the logic here as well as the SCSS syntax required to create something like this.
有人有什么想法吗?
推荐答案
我认为您可能想看看 @extend
.如果您将其设置为:
I think you may want to take a look at @extend
. If you set that up something like:
$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文件中呈现为:
It should render in your css file as:
.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;
}
在文档中
@extend .
这篇关于如何动态生成用逗号分隔的类列表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!