灏天阁

scss-@each 指令

· Yin灏

@each 指令实例

在 @each 变量的定义，其中包含的每个项目的列表中的值。

@each $var in <list or map>
/*
    $var: 它代表了变量的名称。 @each规则将 $var 每个项目在列表中使用 $var 值输出样式。
    <list 或 map>: 这是 SassScript 表达式这将返回一个列表或映射。
*/

示例：

@each $color in red, green, yellow, blue {
  .p_#{$color} {
    background-color: #{$color};
  }
}
/*
    .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>: 它代表列表的列表，每个变量将持有子列表的元素。
*/

示例：

@each $color, $border in (aqua, dotted), (red, solid), (green, double) {
  .#{$color} {
    background-color : $color;
    border: $border;
  }
}
/*
    .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>: 它表示列表对
*/

示例：

@each $header, $color in (h1: red, h2: green, h3: blue) {
  #{$header} {
    color: $color;
  }
}
/*
    h1 {
      color: red;
    }

    h2 {
      color: green;
    }

    h3 {
      color: blue;
    }
*/

- Book Lists -