for 循环语法

随着 sass 3.3 和 plus 版本的发布，@ if 和 else 条件语法变得相同。我们现在可以使用不仅有 scss 而且还有 sass 的表达式。

sass 语法

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译成

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

scss 语法

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译成

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}