Sass 中的@for的應用

在製作網格系統的時候，大家應該對 .col1~.col12 這樣的印象較深。在 CSS 中你需要一個一個去書寫，但在 Sass 中，可以使用 @for 循環來完成。在 Sass 的 @for 循環中有兩種方式：

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

• $i 表示變量
• start 表示起始值
• end 表示結束值

這兩個的區別是關鍵字 through 表示包括 end 這個數，而 to 則不包括 end 這個數。

如下代碼，先來個使用 through 關鍵字的例子：

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

編譯出來的 CSS:

.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

再來個 to 關鍵字的例子：

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

編譯出來的 CSS:

.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

上面是最基礎的，一般不怎麼用，哈哈，所以其實是沒什麼營養的東西，只是幫助理解了原來 @for 是這麼回事。怎麼的也不能就這麼忽悠大家啊，大家好不容易抽空看下文章，就這麼點扯淡的東西怎麼對得住呢。下面再來個營養級別的，@for應用在網格系統生成各個格子 class 的代碼：

//SCSS 
$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;
  }  
}

編譯出來的 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;
  }  
}

其最終編譯出來的 CSS 代碼和上例所編譯出來的一模一樣。

這兩段 Sass 代碼並無太多差別，只是 @for中的 <end> 取值不同。配合 through 的 <end> 值是 12，其遍歷出來的終點值也是 12，和 <end> 值一樣。配合 to 的 <end> 值是 13，其遍歷出來的終點值是 12，就是 <end> 對就的值減去 1 。