每個迴圈

@each 指令允許你遍歷任何列表或對映。它採用 @each $var or <list or map> {} 的形式，其中 $var 可以是任何變數名稱，<list or map> 可以是返回列表或地圖的任何內容。

在下面的示例中，迴圈將遍歷 $authors 列表，將每個專案分配給 $author，使用 $author 的值處理其樣式塊，然後繼續執行列表中的下一個專案。

SCSS 示例

$authors: "adam", "steve", "john";
@each $author in $authors {
    .photo-#{$author} {
      background: image-url("avatars/#{$author}.png") no-repeat
    }
}

CSS 輸出

.photo-adam {
  background: image-url("avatars/adam.png") no-repeat;
}
.photo-steve {
  background: image-url("avatars/steve.png") no-repeat;
}
.photo-john {
  background: image-url("avatars/john.png") no-repeat;
}

多次分配

通過多重賦值，你可以通過在 @each 指令中宣告多個變數來輕鬆訪問所有變數。

巢狀列表

要輕鬆訪問所有巢狀元素，可以宣告單獨的變數以匹配每個巢狀元素。確保你擁有正確數量的變數和巢狀元素。在下面的示例中，每個迴圈遍歷三個元素的列表，每個元素包含三個巢狀的元素。擁有錯誤數量的宣告變數將導致編譯器錯誤。

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

地圖

多個賦值也適用於 Maps，但僅限於兩個變數，一個用於訪問鍵的變數和一個用於訪問該值的變數。在以下示例中，名稱 $key 和 $value 是任意的：

@each $key, $value in ('first': 1, 'second': 2, 'third': 3) {
  .order-#{$key} {
    order: $value;
  }
}