@while

@while <true> {}
當 while 後面的條件為 true 時則迴圈會繼續執行，反之則終止。
但需特別注意，while迴圈必須手動終止，否則會陷入無限迴圈。

例如:

// scss //
$types: 5;                            // 定義一個 $types 的變數(行數) //
$type-width: 10px;                    // 定義一個 $type-width 的變數(字體大小) //

@while $types > 0 {                   // 當 $amount 大於 0 時繼續執行迴圈內程式碼。 //
    .while-#{$types} {                // #{} 裡可以帶入變數，括號裡的內容會被 SASS 編譯。 //
        width: $type-width + $types;  // 寬度 = 字體大小 + 行數 //
    }
    $types: $types - 1;              // 如果沒有變動 $types 的數值可能造成無限迴圈。 // 
}

編｜
譯｜
後｜
　Ｖ

// css //
.while-5 {
  width: 15px;
}

.while-4 {
  width: 14px;
}

.while-3 {
  width: 13px;
}

.while-2 {
  width: 12px;
}

.while-1 {
  width: 11px;
}

@each

@each 在 sass 中有兩種方式可以循環:

1. 在Lists中循環 @each <var> in <list>

例如：

// scss //
$font-size: 1px, 3px, 5px, 7px, 9px;  // 定義一個 $font-size 的變數，為 list 型態。 //
@each $size in $font-size {           // 每一次迴圈都會取出一個 $font-size 的值，直至全部取完。 //
  .size-#{$size} {                    // #{} 裡可以帶入變數，括號裡的內容會被 SASS 編譯。 //
    font-size: $size;
  }
}

編｜ 　
譯｜ 　$font-size：為自行設定的參數，就是一個變量名。
後｜ 　＜list＞：是一個SassScript 表達式，返回一個列表值。
　Ｖ

// css //
.size-1px {
  font-size: 1px;
}

.size-3px {
  font-size: 3px;
}

.size-5px {
  font-size: 5px;
}

.size-7px {
  font-size: 7px;
}

.size-9px {
  font-size: 9px;
}

2. 在Maps中循環@each <var> in <map>

例如:

// scss //
$color-array: (                       // 定義一個 $color-array 的變數，為 map 型態。 //
  red: #f60404,
  yellow: #ffee00,
  purple: #d000ff
);
@each $key, $value in $color-array {  // 使用 map 使用 $key 與 $value 來儲存數值。 //
  .bg-#{$key} {                       // #{} 裡可以帶入變數，括號裡的內容會被 SASS 編譯。 //
    background: $value;
  }
}

編｜
譯｜ 　$color-array：為自行設定的參數，就是一個變量名。
後｜ 　＜list＞：是一個SassScript 表達式，返回一個列表值。
　Ｖ

// css //
.bg-red {
  background: #f60404;
}

.bg-yellow {
  background: #ffee00;
}

.bg-purple {
  background: #d000ff;
}