在Sass中写入增量为1以外的值的循环

在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

它不在文档中，因为它根本没有实现。可以使用

@while

指令执行您想要执行的操作

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

$i:1；
@而$i<100{
//做事
$i:$i+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
}

其他示例更多：

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

---

我会用模数来表示。模运算符提供将一个数除为另一个数的余数。例如，（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
        }
    }
}

---

你能解释一下为什么这会解决这个问题吗？我看不出这比现有的答案有什么增加。谢谢，这太棒了！没问题，@MikkelFennefoss-谢谢你的投票：）这是我喜欢的方法，因为它不仅简单，而且不涉及任何新变量的更改/创建，只是为了计算。它只是检查一个简单操作的结果。很漂亮。这是一个很好的方法来控制范围，以及通过。谢谢分享。我的荣幸！：）