scss-@each指令

　　一、@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; 
}

 

更多专业前端知识，请上 【猿2048】www.mk2048.com