for 迴圈

Created: November-22, 2018

@for 指令允許你迴圈一些程式碼以進行一定量的迭代，並有兩種形式：

@for <var> from <start> through <end> {}
@for <var> from <start> to <end> {}

兩種形式的區別在於通過和到 ; 的通過關鍵字將包括 <end> 在環路，其中*，以*不會; using through 相當於在其他語言中使用 >= 或 <=，例如 C++，JavaScript 或 PHP。

筆記

<start> 和 <end> 都必須是返回整數的整數或函式。
當 <start> 大於 <end> 時，計數器將遞減而不是遞增。

SCSS 示例

@for $i from 1 through 3 {
  .foo-#{$i} { width: 10px * $i; }
}

// CSS output
.foo-1 { width: 10px; }
.foo-2 { width: 20px; }
.foo-3 { width: 30px; }