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