一、控制指令:

1、@for 循环

@for $var from <start> through <end>

@for $var from <start> to <end>

当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值

1
2
3
4
5
6
@for $i from 1 through 3 {
  .item-#{$i} {
    transform: rotate(($i * 30) * 1deg);
    animation: load 1.2s linear (($i - 1) / 10) * 1s infinite;
  }
}

编译后

1
2
3
4
5
6
7
8
9
10
11
12
.item-1 {
  transform: rotate(30deg);
  animation: load 1.2s linear 0s infinite;
}
.item-2 {
  transform: rotate(60deg);
  animation: load 1.2s linear 0.1s infinite;
}
.item-3 {
  transform: rotate(90deg);
  animation: load 1.2s linear 0.2s infinite;
}