@each

@each 規則可以輕鬆地為列表的每個元素或映射中的每一對鍵值對產生樣式或評估程式碼。它非常適用於只有少量變化的重複樣式。它通常寫成 @each <變數> in <表達式> { ... }，其中表達式會返回一個列表。程式碼區塊會針對列表中的每個元素依序進行評估，並將其指派給指定的變數名稱。

  SCSS

  Sass

  CSS

       程式碼遊樂場SCSS 語法$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

       程式碼遊樂場Sass 語法$sizes: 40px, 50px, 80px

@each $size in $sizes
  .icon-#{$size}
    font-size: $size
    height: $size
    width: $size

CSS 輸出.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

使用映射使用映射的永久連結

您也可以使用 @each 迭代映射中的每個鍵值對，寫成 @each <變數>, <變數> in <表達式> { ... }。鍵會指派給第一個變數名稱，值則指派給第二個。

  SCSS

  Sass

  CSS

       程式碼遊樂場SCSS 語法$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}

       程式碼遊樂場Sass 語法$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")

@each $name, $glyph in $icons
  .icon-#{$name}:before
    display: inline-block
    font-family: "Icon Font"
    content: $glyph

CSS 輸出.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f112";
}

.icon-start:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12e";
}

.icon-stop:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12f";
}

解構解構的永久連結

如果您有一個列表的列表，您可以使用 @each 自動將變數指派給內部列表中的每個值，寫成 @each <變數...> in <表達式> { ... }。這稱為 *解構*，因為變數符合內部列表的結構。每個變數名稱都會指派給列表中對應位置的值，如果列表沒有足夠的值，則會指派 null。

  SCSS

  Sass

  CSS

       程式碼遊樂場SCSS 語法$icons:
  "eye" "\f112" 12px,
  "start" "\f12e" 16px,
  "stop" "\f12f" 10px;

@each $name, $glyph, $size in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
    font-size: $size;
  }
}








       程式碼遊樂場Sass 語法$icons: "eye" "\f112" 12px, "start" "\f12e" 16px, "stop" "\f12f" 10px




@each $name, $glyph, $size in $icons
  .icon-#{$name}:before
    display: inline-block
    font-family: "Icon Font"
    content: $glyph
    font-size: $size









CSS 輸出.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f112";
  font-size: 12px;
}

.icon-start:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12e";
  font-size: 16px;
}

.icon-stop:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12f";
  font-size: 10px;
}

💡 小知識

由於 @each 支援解構，且映射 (map) 可視為列表的列表，因此 @each 對映射的支援不需特別額外處理。