Sass @each 规则

@each 规则用于为列表的每个元素或地图的每一对发出样式或评估代码。它对于重复具有一些差异的样式最有利。该部分针对已分配给提供的变量名称的列表或映射对的每个元素进行评估。

句法：

@each  in  {
   ... 
}

例子：

$sizes: 20px, 30px, 100px;
@each $size in $sizes {
  .gfg-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

输出：

.gfg-20px {
  font-size: 20px;
  height: 20px;
  width: 20px;
}

.gfg-30px {
  font-size: 30px;
  height: 30px;
  width: 30px;
}

.gfg-100px {
  font-size: 100px;
  height: 100px;
  width: 100px;
}

@each规则也可以用于映射，通过迭代映射的每个键/值对。

句法：

@each ,  in  { 
   ... 
}

示例：在此示例中，键被分配给第一个变量名，元素被分配给第二个。

$colors: (arial: black, sans-serif: green, algerian: gray);
  
@each $name, $font in $colors {
  .font-#{$name}:before {
    background-color: white;
    font-family: $name;
    color: $font;
  }
}

输出：

.font-arial:before {
  background-color: white;
  font-family: arial;
  color: black;
}

.font-sans-serif:before {
  background-color: white;
  font-family: sans-serif;
  color: green;
}

.font-algerian:before {
  background-color: white;
  font-family: algerian;
  color: gray;
}

解构： @each 规则还可以自动将列表列表中的变量分配给内部列表中的每个值。由于变量与内部列表的结构相匹配，因此称为解构。每个变量名称都分配给列表中相应位置的值，如果列表没有足够的值，则为 null。

句法：

@each  in  {  
   ... 
}

示例：在此示例中，键被分配给第一个变量名，元素被分配给第二个。

$colors: 
  arial black 10px,
  sans-serif green 12px, 
  algerian gray 20px;
  
@each $name, $font, $size in $colors {
  .font-#{$name}:before {
    background-color: white;
    font-family: $name;
    color: $font;
    font-size: $size;
  }
}

输出：

.font-arial:before {
  background-color: white;
  font-family: arial;
  color: black;
  font-size: 10px;
}

.font-sans-serif:before {
  background-color: white;
  font-family: sans-serif;
  color: green;
  font-size: 12px;
}

.font-algerian:before {
  background-color: white;
  font-family: algerian;
  color: gray;
  font-size: 20px;
}