@each

该@each规则可以轻松地为列表的每个元素或map中的每一对生成样式或计算代码。这对于它们之间只有一些变化的重复样式非常有用。它通常写成@each<variable>in{...}，表达式返回一个列表。依次为列表中的每个元素评估该块，并将其分配给给定的变量名称。

scss 语句	css 语句
$sizes: 40px, 50px, 80px; @each `$size` in $sizes { .icon-#{$size} { font-size: $size; height: $size; width: $size; } }	.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; }

scss 语句

css 语句

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

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

.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<variable>,<variable>in<expression>{...}，来迭代映射中的每个键/值对。键被分配给第一个变量名，元素值被分配给第二个。

scss 语句	css 语句
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f"); @each `$name`, `$glyph` in $icons { .icon-#{$name}:before { display: inline-block; font-family: "Icon Font"; content: $glyph; } }	@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: ""; }

scss 语句

css 语句

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

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

@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<variable...>in<expression>{...}，来自动将变量分配给内部列表中的每个值。这称为解构，因为变量匹配内部列表的结构。每个变量名都分配给列表中相应位置的值，如果列表中没有足够的值，则为null。

scss 语句	css 语句
$icons: "eye" "\f112" 12px, "start" "\f12e" 16px, "stop" "\f12f" 10px; @each `$name`, `$glyph`, in $icons { .icon-#{$name}:before { display: inline-block; font-family: "Icon Font"; content: $glyph; font-size: $size; } }	@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; }

scss 语句

css 语句

$icons:
  "eye" "\f112" 12px,
  "start" "\f12e" 16px,
  "stop" "\f12f" 10px;

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

@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地图支持不需要特别支持地图就可以工作。