一、@each指令实例
在@each变量的定义，其中包含的每个项目的列表中的值。
语法：
@each $var in <list or map>
语法简要说明如下。
$var: 它代表了变量的名称。 @each规则将 $var 每个项目在列表中使用 $var 值输出样式。
<list 或 map>: 这是 SassScript 表达式这将返回一个列表或映射。scss
scss代码实例：
@each $color in red, green, yellow, blue { ?.p_#{$color} { ???background-color: #{$color}; ?}}编译后的css结果为：
.p_red { ?background-color: red; }.p_green { ?background-color: green; }.p_yellow { ?background-color: yellow; }.p_blue { ?background-color: blue; }
二、@each多重分配
多个值也可以用 @each 指令中使用。如， $var1, $var2,$var3, ... 在 <list>.
语法：
@each $var1, $var2, $var3 ... in <list>
语法简要说明如下。
$var1, $var2 和 $var3: 这些代表变量的名称。
<list>: 它代表列表的列表，每个变量将持有子列表的元素。
scss代码实例:
@each $color, $border in (aqua, dotted), ???????????????????????(red, solid), ???????????????????????(green, double){ ?.#{$color} { ???background-color : $color; ???border: $border; ?}}编译后的css代码：
.aqua { ?background-color: aqua; ?border: dotted; }.red { ?background-color: red; ?border: solid; }.green { ?background-color: green; ?border: double; }三、@each多重分配与映射
多重任务可以很好地处理映射，他们被认为是列表对。如果你想使用映射，那么必须改变@each声明和使用多个任务。
语法：
@each $var1, $var2 in <map>
语法简要说明如下。
$var1, $var2: 这些代表变量的名称
<map>: 它表示列表对
scss代码实例：
@each $header, $color in (h1: red, h2: green, h3: blue) { ?#{$header} { ???color: $color; ?}}编译后的css代码如下：
h1 { ?color: red;
}h2 { ?color: green;
}h3 { ?color: blue;
}scss-@each指令
原文地址：https://www.cnblogs.com/ibabyli/p/9871382.html