2021-02-06 04:42:36 +00:00
---
id: 587d7dbf367417b2b2512bba
2021-07-26 03:17:00 +09:00
title: Usa @each para asignar elementos en una lista
2021-02-06 04:42:36 +00:00
challengeType: 0
forumTopicId: 301461
dashedName: use-each-to-map-over-items-in-a-list
---
# --description--
2021-07-26 03:17:00 +09:00
El último desafío mostró cómo la directiva `@for` utiliza un valor inicial y final para hacer un bucle un determinado número de veces. Sass también ofrece la directiva `@each` que hace un bucle sobre cada elemento de una lista o mapa. En cada iteración, la variable se asigna al valor actual de la lista o del mapa.
2021-02-06 04:42:36 +00:00
```scss
@each $color in blue, red, green {
.#{$color}-text {color: $color;}
}
```
2021-09-07 07:47:37 -07:00
Un mapa tiene una sintaxis ligeramente diferente. He aquí un ejemplo:
2021-02-06 04:42:36 +00:00
```scss
$colors: (color1: blue, color2: red, color3: green);
@each $key, $color in $colors {
.#{$color}-text {color: $color;}
}
```
2021-07-26 03:17:00 +09:00
Ten 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 anteriores se convierten en el siguiente CSS:
2021-02-06 04:42:36 +00:00
```scss
.blue-text {
color: blue;
}
.red-text {
color: red;
}
.green-text {
color: green;
}
```
# --instructions--
2021-07-26 03:17:00 +09:00
Escribe una directiva `@each` que recorra una lista: `blue, black, red` y asigna cada variable a una clase `.color-bg` , donde la parte `color` cambia para cada elemento. Cada clase debe establecer el `background-color` al respectivo color.
2021-02-06 04:42:36 +00:00
# --hints--
2021-07-26 03:17:00 +09:00
Tu código debe utilizar la directiva `@each` .
2021-02-06 04:42:36 +00:00
```js
assert(code.match(/@each /g));
```
2021-07-26 03:17:00 +09:00
Tu clase `.blue-bg` debe tener un `background-color` de color azul.
2021-02-06 04:42:36 +00:00
```js
assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');
```
2021-07-26 03:17:00 +09:00
Tu clase `.black-bg` debe tener un `background-color` de color negro.
2021-02-06 04:42:36 +00:00
```js
assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');
```
2021-07-26 03:17:00 +09:00
Tu clase `.red-bg` debe tener un `background-color` de color rojo.
2021-02-06 04:42:36 +00:00
```js
assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)');
```
# --seed--
## --seed-contents--
```html
< style type = 'text/scss' >
div {
height: 200px;
width: 200px;
}
< / style >
< div class = "blue-bg" > < / div >
< div class = "black-bg" > < / div >
< div class = "red-bg" > < / div >
```
# --solutions--
```html
< style type = 'text/scss' >
@each $color in blue, black, red {
.#{$color}-bg {background-color: $color;}
}
div {
height: 200px;
width: 200px;
}
< / style >
< div class = "blue-bg" > < / div >
< div class = "black-bg" > < / div >
< div class = "red-bg" > < / div >
```
---
```html
< style type = 'text/scss' >
$colors: (color1: blue, color2: black, color3: red);
@each $key, $color in $colors {
.#{$color}-bg {background-color: $color;}
}
div {
height: 200px;
width: 200px;
}
< / style >
< div class = "blue-bg" > < / div >
< div class = "black-bg" > < / div >
< div class = "red-bg" > < / div >
```