SCSS list 與 for 迴圈

SCSS list 有點類似於一般語言的陣列。
陣列有點像是櫃子，我們把東西一個一個存進去。例如：

$list: 12px, 14px, 16px, 18px;

實作上陣列常會搭配迴圈，在 SCSS 中也提供了我們這項功能。





SCSS 迴圈分為 each 迴圈與 for 迴圈，這個章節會先解釋  for 迴圈的用法。
for 迴圈能幫助我們完成指定次數的工作，比如 1次到 9 次。

假如我需要一個 class name 叫做 length1，他代表寬度 100%，length2 代表寬度 50%，以此類推...用純 CSS 想非常麻煩，我們其實可以利用 SCSS 一次產生大量的選擇器：

@for $i from 1 through 5 { //從 1 到 5 共執行 5 次。
   
    .length#{$i} {
        width: ( 100% / $i );
    }
 }

如此 SCSS 就會自動幫我們產生 .length1 到 .length9：

.length1 {
     width: 100%;
 }

.length2 {
     width: 50%;
 }

.length3 {
     width: 33.333%;
 }

.length4 {
     width: 25%;
 }

.length5 {
     width: 20%;
 }

其中請注意 $i 的部分，$i 代表目前執行階段的數字，＄是一個變數前輟，所以 $i 是一個變數，你可以使用自己喜愛的命名。要注意由於 $i 是一個數字，要使用 #{} 轉型。

我們可以使用 for 迴圈把 list 中的物件一個一個取出來：

@for $i from 1 through length($list) { //$list 有幾個項目，就跑幾次迴圈
   
    .length#{$i} {
        width: nth($list, $i);
    }
 }

搭配 $list的內容，產生 .length1 到 .length4：

.length1 {
     width: 12px;
 }

.length2 {
     width: 14px;
 }

.length3 {
     width: 16px;
 }

.length4 {
     width: 18px;
 }