每个循环

@each 指令允许你遍历任何列表或映射。它采用 @each $var or <list or map> {} 的形式，其中 $var 可以是任何变量名称，<list or map> 可以是返回列表或地图的任何内容。

在下面的示例中，循环将遍历 $authors 列表，将每个项目分配给 $author，使用 $author 的值处理其样式块，然后继续执行列表中的下一个项目。

SCSS 示例

$authors: "adam", "steve", "john";
@each $author in $authors {
    .photo-#{$author} {
      background: image-url("avatars/#{$author}.png") no-repeat
    }
}

CSS 输出

.photo-adam {
  background: image-url("avatars/adam.png") no-repeat;
}
.photo-steve {
  background: image-url("avatars/steve.png") no-repeat;
}
.photo-john {
  background: image-url("avatars/john.png") no-repeat;
}

多次分配

通过多重赋值，你可以通过在 @each 指令中声明多个变量来轻松访问所有变量。

嵌套列表

要轻松访问所有嵌套元素，可以声明单独的变量以匹配每个嵌套元素。确保你拥有正确数量的变量和嵌套元素。在下面的示例中，每个循环遍历三个元素的列表，每个元素包含三个嵌套的元素。拥有错误数量的声明变量将导致编译器错误。

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

地图

多个赋值也适用于 Maps，但仅限于两个变量，一个用于访问键的变量和一个用于访问该值的变量。在以下示例中，名称 $key 和 $value 是任意的：

@each $key, $value in ('first': 1, 'second': 2, 'third': 3) {
  .order-#{$key} {
    order: $value;
  }
}