编写一个循环,在Sass中增加1以外的值

Question

在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

Answer 1

它不在文档中,因为它根本没有实现.您可以使用该@while指令完成您想要做的事情.

$i: 1;
@while $i < 100 {
  // do stuff
  $i: $i + 2;
}

Answer 2

Sass没有提供一种方法来指定使用@for循环增加多少.相反,您编写循环以反映您需要采取多少步骤来获得最终输出.对于从1到100的所有奇数,这是50步(100/2).在循环内部,您可以使用算术(加法,减法,乘法,除法)来得出最终值.

@for $i from 1 through 50 {
  $value: $i * 2 - 1;
  // stuff
}

DEMO

或更一般的版本:

$max: 100;
$step: 2;

@for $i from 1 through ceil($max/$step) {
  $value: ($i - 1)*$step + 1;
  // stuff
}

DEMO

Answer 3

我会使用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
        }
    }
}