Lzh on GitHub

@each

@each 规则使得为列表中的每个元素或映射中的每对发出样式或评估代码变得容易。它非常适合那些只有少量变化的重复样式。它的通常写法是 @each <variable> in <expression> { ... }，其中 expression 返回一个列表。该代码块依次为列表中的每个元素进行评估，该元素被分配给给定的变量名。

@each 规则使得为列表中的每个元素或映射中的每对发出样式或评估代码变得容易。它非常适合那些只有少量变化的重复样式。它的通常写法是 @each <variable> in <expression> { ... }，其中 expression 返回一个列表。该代码块依次为列表中的每个元素进行评估，该元素被分配给给定的变量名。

$sizes: 40px, 50px, 80px;

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

使用映射

你也可以使用 @each 来迭代映射中的每个键/值对，其写法是 @each <variable>, <variable> in <expression> { ... }。键被分配给第一个变量名，值被分配给第二个变量名。

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

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

解构

如果你有一个列表的列表，你可以使用 @each 通过编写 @each <variable...> in <expression> { ... } 来自动为内部列表中的每个值分配变量。这被称为解构，因为变量匹配内部列表的结构。每个变量名都被分配给列表中相应位置的值，如果列表没有足够的值，则为 null。

$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;
  }
}
因为 @each 支持解构，并且映射被视为列表的列表，所以 @each 的映射支持无需为映射提供特殊支持即可工作。