Sass的表达式和控制命令 @for 篇

@for

<code>@for</code>指令常用于循环输出。

<code>@for</code> 有两种使用方式:<code>from start through end</code>和<code>from start to end</code>,
两者的区别在于，前者遍历的范围是 [start, end], 而后者的遍历范围是 [start, end-1]。在<code>@for</code>循环中使用一个固定变量来替代遍历到的元素。如果你想实现从大到小的遍历，只需让 start 大于 end 即可。或者可以这样来理解

@for $i from <start> through <end>
@for $i from <start> to <end>

 $i 表示变量
 start 表示起始值
 end 表示结束值
 这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。
 从 <start> 开始循环，到 <end> 结束

给个例子理解下!:

through:

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

编译结果如下:

.item-1 {
  width: 2em; }

.item-2 {
  width: 4em; }

.item-3 {
  width: 6em; }

从 <code>start</code>开始（此处示例是1），一直遍历到 <code>end</code> (此处示例是3) 包括<code>end</code>的值。

to:

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

编译结果如下:

.items-1 {
  width: 2em; }

.items-2 {
  width: 4em; }

循环从 <code>start</code>开始，一直遍历循环到<code>end</code> 结束。这种形式的循环只要碰到 <code>end</code> 就会停止循环（将不会遍历<code>end</code> 值）。