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;
}

 

posted @ 2018-10-29 16:30  栗子壳  阅读(2282)  评论(0编辑  收藏