Scss 遍历之批量设置样式

@for

这个指令包含两种格式：@for $var from through ，或者 @for $var from to ，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 与 的值，而使用 to 时条件范围只包含 的值不包含 的值。

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

引入样式后，即可在页面中使用了

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

通过@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;
  }
}