sass for循环

示例

该@for指令允许您循环一些代码进行一定数量的迭代，并具有两种形式：

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

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

两种形式的区别是通过和到; 的通过关键字将包括<end>在环路中，其中，以不会; 使用直通等效于使用>=或使用<=其他语言，例如C ++，JavaScript或PHP。

笔记

• 双方<start>并<end>必须是整数或函数返回整数。

• 当<start>大于时<end>，计数器将递减而不是递增。

SCSS示例

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

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