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