使用@while循环
创建动态类的名字我想用创造一个样式表如下SASS:使用@while循环
.dC1, .dC2, .dC3 {
color: white;
}
.dC4, .dC5 {
color: black;
}
使用SASS一个@while循环,如下面的(我知道这是一个有点过,我将完善它,一旦我弄清楚如何将它设置):
$i: 1;
$whiteLevel: 3;
$blackLevel: 5;
$val: nil;
@while $i <= $whiteLevel {
$val: $val + .dC#{$i};
$i: $i + 1;
}
$val {
color: white;
}
$val: nil;
@while $i > $whiteLevel and $i <= $blackLevel {
$val: $val + .dC#{$i};
$i: $i + 1;
}
$val {
color: black;
}
是的,我知道这是丑陋的罪过,但我认为它跨越我想要的东西得到。最终,$ whiteLevel和$ blackLevel(或者我最终称之为无用)将放在一个_base.scss文件中,这样我就可以随时更改不同级别和类别的数量。
有没有可能做到这一点,有人可以指出我正确的方向吗?
在此先感谢,并期待听到任何建议!
编辑:为了澄清,我可以使用下面的代码,以获得相同的结果:
$whiteLevel: 3;
.cW {
color: white;
}
.cB {
color: black;
}
@for $i from 1 through 5{
.dC#{$i} {
@if $i <= $whiteLevel {
@extend .cW;
} @else {
@extend .cB;
}
}
}
这将产生:
.cW, .dC1, .dC2, .dC3 {
color: white;
}
.cB, .dC4, .dC5 {
color: black;
}
这是99%的解决方案,但它意味着我必须已经建立了一个特定的类来容纳@extend。我的目标是使这个完全动态并取决于$ whiteLevel和$ blackLevel的值。如果我将它们设置为0,我想使它成为没有类创建。
希望能帮助澄清一点。
编辑编辑!
由于这里cimmanon是我将使用的解决方案(基于所提供的解决方案,总得爱%符号):
$whiteLevel: 3;
%cW {
color: white;
}
%cB {
color: black;
}
@for $i from 1 through 5{
.dC#{$i} {
@if $i <= $whiteLevel {
@extend %cW;
} @else {
@extend %cB;
}
}
}
非常感谢cimmanon!
要正确编写表达式将是这样的:
$val: $val + '.dC#{$i}';
但你忘了占逗号,所以你的选择最终看起来像这样:
.dC4.dC5 {
color: black;
}
即使你确实添加了逗号,你最终会得到所有3个以逗号开头的类。还有更有效的方式做你要找什么,妥善占逗号:
$minLevel: 1;
$whiteLevel: 3;
$blackLevel: 5;
%white {
color: white;
}
@for $i from $minLevel through $whiteLevel {
.dC#{$i} {
@extend %white;
}
}
$blackSelectors:();
@for $i from $whiteLevel + 1 through $blackLevel {
$blackSelectors: append($blackSelectors, unquote('.dC#{$i}'), comma);
}
#{$blackSelectors} {
color: black;
}
输出:
.dC1, .dC2, .dC3 {
color: white;
}
.dC4, .dC5 {
color: black;
}
我们在同一时间发布,在审查了您的答案后,我错过的是%,而不是。为选择器。谢谢! – anjiTechGuy 2013-05-11 12:44:33
你尝试运行此代码?是否有错误(错误是什么?)?输出是否错误? – cimmanon 2013-05-11 11:49:40
抛出以下错误:语法错误:“$ val:$ val +”后的无效CSS:预期表达式(例如1px,粗体)为“.dC#{$ i};” – anjiTechGuy 2013-05-11 12:10:51