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