El último desafío mostró cómo la directiva @for usa un valor de inicio y final para hacer un bucle un cierto número de veces. Sass también ofrece la directiva @each que recorre cada elemento en una lista o mapa. En cada iteración, la variable se asigna al valor actual de la lista o mapa.

@each $color in blue, red, green {
.#{$color}-text {color: $color;}
}

Un mapa tiene una sintaxis ligeramente diferente. Aquí hay un ejemplo:

$colors: (color1: blue, color2: red, color3: green);

@each $key, $color in $colors {
.#{$color}-text {color: $color;}
}

Tenga en cuenta que la variable $key es necesaria para hacer referencia a las claves en el mapa. De lo contrario, el CSS compilado tendría color1 , color2 ... en él. dos ejemplos de código anteriores se convierten en el siguiente CSS:

.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}

Escriba una directiva @each que pase por una lista: blue, black, red y asigne cada variable a una clase .color-bg , donde la parte de "color" cambia para cada elemento. Cada clase debe establecer el background-color respectivo.

```yml tests: - text: Su código debe utilizar la directiva @each . testString: 'assert(code.match(/@each /g), "Your code should use the @each directive.");' - text: Tu clase .blue-bg debería tener un background-color de background-color azul. testString: 'assert($(".blue-bg").css("background-color") == "rgb(0, 0, 255)", "Your .blue-bg class should have a background-color of blue.");' - text: Tu clase .black-bg debe tener un background-color de background-color negro. testString: 'assert($(".black-bg").css("background-color") == "rgb(0, 0, 0)", "Your .black-bg class should have a background-color of black.");' - text: Tu clase .red-bg debe tener un background-color de background-color rojo. testString: 'assert($(".red-bg").css("background-color") == "rgb(255, 0, 0)", "Your .red-bg class should have a background-color of red.");' ```