在SASS中,循环的写法如下:
@for $i from 1 through 100 {
//stuff
}
这将产生1,2,3,4 ......一直到100。
你如何以两个单位的间隔进行循环?
@for $i from 1 through 100 *step 2*{
//stuff
}
所以结果是1,3,5,7 ......到99
答案 0 :(得分:38)
它不在文档中,因为它根本没有实现。您想要做的是使用@while
指令。
$i: 1;
@while $i < 100 {
// do stuff
$i: $i + 2;
}
答案 1 :(得分:14)
Sass没有提供一种方法来指定使用@for循环增加多少。相反,您编写循环以反映您需要采取多少步骤来获得最终输出。对于从1到100的所有奇数,这是50步(100/2)。在循环内部,您可以使用算术(加法,减法,乘法,除法)来得出最终值。
@for $i from 1 through 50 {
$value: $i * 2 - 1;
// stuff
}
或更一般的版本:
$max: 100;
$step: 2;
@for $i from 1 through ceil($max/$step) {
$value: ($i - 1)*$step + 1;
// stuff
}
答案 2 :(得分:12)
我为此使用Modulus。模数运算符为数字的剩余部分提供另一个数字。例如(3%2)将给你1,(5%2)或(7%2)。
如果你使用了这个:
@for $i from 1 through 100 {
@if $i % 2 == 0 {
#{$i}
}
}
您将获得2,4,6,8,10 ... 100
但是你想要1,3,5,7,9 ... 99 - 所以将它抵消1:
@for $i from 1 through 100 {
@if ($i+1) % 2 == 0 {
.your-class-#{$i} {
// do stuff
}
}
}
答案 3 :(得分:1)
其他更多示例:
.my-class {
$step : 5;
$from : ceil( 1 /$step);
$through : ceil( 100 /$step);
$unit : '%';
@for $i from $from through $through {
$i : $i * $step;
width: $i#{$unit};
}
}