Scss 遍历之批量设置样式

@for

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

@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 <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。

$colors: lightgoldenrodyellow, lightblue, lightgray, lightgreen;

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