El último desafío mostró cómo la directiva @for utiliza un valor de inicio y final para realizar 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 en azul, rojo, verde {
. # {$ color} -text {color: $ color;}
}

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

$ colores: (color1: azul, color2: rojo, color3: verde);

@each $ clave, $ color en $ colores {
. # {$ 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. Los dos ejemplos de código anteriores se convierten en el siguiente CSS:

.blue-text {
color azul;
}

.red-text {
color rojo;
}

.green-text {
color verde;
}

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.");' ```