#### 1.2 for函数 定义：就是一个公式，从起始到结束的逐个循环计算 **注意：** Sass 的 @for 循环中有两种表达方式： 方式1、@for $i from <start> through <end> 方式2、@for $i from <start> to <end> * $i 表示变量 * start 表示起始值 * end 表示结束值 这两个的区别是关键字 **through** 表示**包括 end 这个数**，而**to** 则**不包括 end 这个数** **列1：through关键字** sass样式 ~~~ @for $i from 1 through4 { .item-#{$i} { width: 3px * $i; } }//花括号里面的公司按照 $i从1到4赋值计算 ~~~ 转化成css ~~~ .item-1 { width: 3px; } .item-2 { width: 6px; } .item-3 { width: 9px; } .item-4 { width: 12px; } ~~~ **列2：to关键字** sass样式 ~~~ @for $i from 1 to 4 { .item-#{$i} { width: 3px * $i; } } ~~~ 转化成css ~~~ .item-1 { width: 3px; } .item-2 { width: 6px; } .item-3 { width: 9px; } ~~~ 如果要达到through关键字的同样的效果，需要在将to后面的结束值写成5才可以 **列3：复杂列子** sass样式 ~~~ $grid-prefix: span !default; $grid-width: 60px !default; $grid-gutter: 20px !default; %grid { float: left; margin-left: $grid-gutter / 2; margin-right: $grid-gutter / 2;//占位符，转化不会被显示出来 } @for $i from 1 through 12 { .#{$grid-prefix}#{$i}{ width: $grid-width * $i + $grid-gutter * ($i - 1); @extend %grid;//span1到span12都有 %grid的属性 } } ~~~ 转化成css ~~~ .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { float: left; margin-left: 10px; margin-right: 10px; } .span1 { width: 60px; } .span2 { width: 140px; } .span3 { width: 220px; } .span4 { width: 300px; } .span5 { width: 380px; } .span6 { width: 460px; } .span7 { width: 540px; } .span8 { width: 620px; } .span9 { width: 700px; } .span10 { width: 780px; } .span11 { width: 860px; } .span12 { width: 940px; } ~~~ 将上面的示例稍做修改，将 @for through 方式换成 @for to:： //SCSS ~~~ @for $i from 1 to 13 { .#{$grid-prefix}#{$i}{ width: $grid-width * $i + $grid-gutter * ($i - 1); @extend %grid; } } ~~~