@each

该@each规则使为列表中的每个元素或地图中的每个对发出样式或评估代码变得容易。这对于重复性样式非常有用，它们之间只有很少的变化。通常写成@each <variable> in <expression> { ... }，表达式在其中返回一个列表。依次对列表的每个元素评估该块，并将其分配给给定的变量名称。

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 <variable>, <variable> in <expression> { ... }。键被分配给第一个变量名，元素被分配给第二个变量名。

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  输出@charset "UTF-8";
.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "";
}

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

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

解构固定链接解构

如果您有一个列表列表，则可以@each通过写入来自动将变量分配给内部列表中的每个值@each <variable...> in <expression> { ... }。这被称为解构，因为变量与内部列表的结构匹配。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  输出@charset "UTF-8";
.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "";
  font-size: 12px;
}

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

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

???? 有趣的事实：

由于@each支持销毁，并且地图算作列表列表，因此@each的地图支持可以工作，而无需特别支持地图。