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