SASS @for 循环输出 CSS 作为一个代码块? [英] SASS @for loop output CSS as one block of code?
本文介绍了SASS @for 循环输出 CSS 作为一个代码块?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下 for 循环:
@for $i from 1 through $columns {
.tile#{$i}.noMargin {
margin:0;
}
}
输出为:
.threeColForm .tile1.noMargin {
margin: 0; }
.threeColForm .tile2.noMargin {
margin: 0; }
.threeColForm .tile3.noMargin {
margin: 0; }
.threeColForm .tile4.noMargin {
margin: 0; }
.threeColForm .tile5.noMargin {
margin: 0; }
.threeColForm .tile6.noMargin {
margin: 0; }
.threeColForm .tile7.noMargin {
margin: 0; }
.threeColForm .tile8.noMargin {
margin: 0; }
.threeColForm .tile9.noMargin {
margin: 0; }
.threeColForm .tile10.noMargin {
margin: 0; }
.threeColForm .tile11.noMargin {
margin: 0; }
.threeColForm .tile12.noMargin {
margin: 0; }
有没有办法写这个,这样它会输出这样的:
.threeColForm .tile1.noMargin,
.threeColForm .tile2.noMargin,
.threeColForm .tile3.noMargin,
.threeColForm .tile4.noMargin,
.threeColForm .tile5.noMargin,
.threeColForm .tile6.noMargin,
.threeColForm .tile7.noMargin,
.threeColForm .tile8.noMargin,
.threeColForm .tile9.noMargin,
.threeColForm .tile10.noMargin,
.threeColForm .tile11.noMargin,
.threeColForm .tile12.noMargin {
margin: 0;
}
感谢任何帮助.谢谢
我的 CSS(仅供参考):
.threeColForm {
//cols, gutter
@include grid(12, 1);
}
推荐答案
使用 @extend
$columns: 12;
%no-margin {
margin: 0;
}
@for $i from 1 through $columns {
.tile#{$i}.noMargin {
@extend %no-margin;
}
}
输出:
.tile1.noMargin, .tile2.noMargin, .tile3.noMargin, .tile4.noMargin, .tile5.noMargin, .tile6.noMargin, .tile7.noMargin, .tile8.noMargin, .tile9.noMargin, .tile10.noMargin, .tile11.noMargin, .tile12.noMargin {
margin: 0;
}
这篇关于SASS @for 循环输出 CSS 作为一个代码块?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文