---
id: 587d7dbf367417b2b2512bba
title: Use @each to Map Over Items in a List
challengeType: 0
videoUrl: ''
localeTitle: Utilice @each para asignar sobre elementos en una lista
---
## Description
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;
}
## Instructions
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.
## Tests
```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.");'
```
## Challenge Seed
## Solution
```js
// solution required
```