@for

這個(gè)指令包含兩種格式：@for $var from through ，或者 @for $var from to ，區(qū)別在于 through 與 to 的含義：當(dāng)使用 through 時(shí)，條件范圍包含 與 的值，而使用 to 時(shí)條件范圍只包含 的值不包含 的值。

@for $var from 1 through 3 {
  $dis: $var * 10 + px;
  .mt-#{$var} {
    margin-top: $dis;
  }
}

編譯后

.mt-1 {
  margin-top: 10px;
}
.mt-2 {
  margin-top: 20px;
}
.mt-3 {
  margin-top: 30px;
}

引入樣式后，即可在頁(yè)面中使用了

<div class="mt-2">div>

通過(guò)@for可以快速的定義一些公共樣式，非常方便

@each

指令格式為$var in , $var 可以是任何變量名，比如 $length 或者 $name，而 是一連串的值，也就是值列表。

$colors: lightgoldenrodyellow, lightblue, lightgray, lightgreen;

@each $c in $colors {
  $i: index($colors, $c); // 索引
  .box:nth-child(#{$i}) {
    background-color: $c;
  }
}