@each

@each 规则可以轻松地为列表的每个元素或映射的每个键值对发出样式或执行代码。它非常适合只有少量变化的重复样式。通常写作 @each <变量> in <表达式> { ... }，其中表达式返回一个列表。代码块将为列表的每个元素依次求值，并将其赋值给给定的变量名。

  SCSS

  Sass

  CSS

      Playground
    SCSS Syntax$sizes: 40px, 50px, 80px;

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

      Playground
    Sass Syntax$sizes: 40px, 50px, 80px

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

CSS Output.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;
}

使用映射使用映射 permalink

你还可以使用 @each 遍历映射中的每个键/值对，写作 @each <变量>, <变量> in <表达式> { ... }。第一个变量名被赋值为键，第二个变量名被赋值为元素。

  SCSS

  Sass

  CSS

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

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

      Playground
    Sass Syntax$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 Output.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";
}

解构解构 permalink

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

  SCSS

  Sass

  CSS

      
      Playground
    SCSS Syntax$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;
  }
}








      
      Playground
    Sass Syntax$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 Output.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;
}

💡 Fun fact:

因为 @each 支持解构，并且映射被视为列表的列表，所以 @each 的映射支持无需特别支持映射。