标签：列表 名称 head 使用 scss strong 说明 项目 ble
一、@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;
}
标签：列表 名称 head 使用 scss strong 说明 项目 ble
原文地址：https://www.cnblogs.com/ibabyli/p/9871382.html
