Sass @cada regla

La regla @each se utiliza para emitir estilos o evaluar códigos para cada elemento de una lista o cada par de un mapa. Es sobre todo ventajoso para repetir estilos que tienen algunas diferencias en ellos. La sección se evalúa para cada elemento de la lista o par del mapa que se ha asignado al nombre de variable proporcionado.

Sintaxis:

@each <variable> in <expression> {
   ... 
}

Ejemplo:

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

Producción: 

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

La regla @each también se puede usar para mapas, al iterar sobre cada par clave/valor del mapa.

Sintaxis:

@each <variable>, <variable> in <expression> { 
   ... 
}

Ejemplo: En este ejemplo, la clave se asigna al primer nombre de variable y el elemento se asigna al segundo.

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

Producción: 

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

Desestructuración : la regla @each también puede asignar automáticamente variables en la lista de listas a cada uno de los valores en la lista interna. Como las variables coinciden con la estructura de las listas internas, se denomina desestructuración. Cada nombre de variable se asigna al valor en su posición correspondiente en la lista, o es nulo si la lista no tiene suficientes valores.

Sintaxis:

@each <variables...> in <expression> {  
   ... 
}

Ejemplo: En este ejemplo, la clave se asigna al primer nombre de variable y el elemento se asigna al segundo. 

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

Producción:

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