sass - 在 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
}

演示

或更通用的版本：

$max: 100;
$step: 2;

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

演示

Answer 3

我会为此使用模数。模运算符为您提供一个数字除以另一个数字的余数。例如 (3 % 2) 会给你 1，(5 % 2) 或 (7 % 2) 也会给你 1。

如果你使用这个：

@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
        }
    }
}

Answer 4

其他示例更多：

.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};
    }
}

Answer 5

我认为 sass 没有实现这一点，因为它很容易实现。只需在循环块中定义一个新变量，将循环值与您希望的步骤相乘。

一般示例

@for $i from 1 through 9 {
  $v: $i * 100;
  .w#{$v} {
   font-weight: $v;
}
}

您的代码示例

@for $i from 1 through 100 {
    //stuff
    // multiple value by your step
    $new_value: $i * 2;
    // use $new_value here:
}