2018-09-30 22:01:58 +00:00
---
id: 587d7dbf367417b2b2512bba
title: Use @each to Map Over Items in a List
challengeType: 0
2019-08-05 16:17:33 +00:00
forumTopicId: 301461
2021-01-13 02:31:00 +00:00
dashedName: use-each-to-map-over-items-in-a-list
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
2019-07-18 15:32:12 +00:00
2020-11-27 18:02:05 +00:00
The last challenge showed how the `@for` directive uses a starting and ending value to loop a certain number of times. Sass also offers the `@each` directive which loops over each item in a list or map. On each iteration, the variable gets assigned to the current value from the list or map.
2019-05-14 12:01:32 +00:00
```scss
@each $color in blue, red, green {
.#{$color}-text {color: $color;}
}
```
2018-09-30 22:01:58 +00:00
A map has slightly different syntax. Here's an example:
2019-05-14 12:01:32 +00:00
```scss
$colors: (color1: blue, color2: red, color3: green);
@each $key, $color in $colors {
.#{$color}-text {color: $color;}
}
```
2020-11-27 18:02:05 +00:00
Note that the `$key` variable is needed to reference the keys in the map. Otherwise, the compiled CSS would have `color1` , `color2` ... in it. Both of the above code examples are converted into the following CSS:
2019-05-14 12:01:32 +00:00
```scss
.blue-text {
color: blue;
}
.red-text {
color: red;
}
.green-text {
color: green;
}
```
2020-11-27 18:02:05 +00:00
# --instructions--
2018-09-30 22:01:58 +00:00
2021-02-25 17:19:24 +00:00
Write an `@each` directive that goes through a list: `blue, black, red` and assigns each variable to a `.color-bg` class, where the `color` part changes for each item. Each class should set the `background-color` the respective color.
2019-07-18 15:32:12 +00:00
2020-11-27 18:02:05 +00:00
# --hints--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
Your code should use the `@each` directive.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert(code.match(/@each /g));
```
Your `.blue-bg` class should have a `background-color` of blue.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');
2018-09-30 22:01:58 +00:00
```
2020-11-27 18:02:05 +00:00
Your `.black-bg` class should have a `background-color` of black.
```js
assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');
```
Your `.red-bg` class should have a `background-color` of red.
```js
assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)');
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --seed--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
2020-05-09 14:31:18 +00:00
< style type = 'text/scss' >
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
div {
height: 200px;
width: 200px;
}
< / style >
< div class = "blue-bg" > < / div >
< div class = "black-bg" > < / div >
< div class = "red-bg" > < / div >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2019-07-18 15:32:12 +00:00
2018-12-06 15:44:34 +00:00
```html
2020-05-09 14:31:18 +00:00
< style type = 'text/scss' >
2018-12-06 15:44:34 +00:00
2018-10-23 12:16:30 +00:00
@each $color in blue, black, red {
.#{$color}-bg {background-color: $color;}
2018-12-06 15:44:34 +00:00
}
2018-10-23 12:16:30 +00:00
div {
height: 200px;
width: 200px;
}
< / style >
< div class = "blue-bg" > < / div >
< div class = "black-bg" > < / div >
< div class = "red-bg" > < / div >
2018-09-30 22:01:58 +00:00
```
2018-10-23 12:16:30 +00:00
2020-11-27 18:02:05 +00:00
---
2019-07-18 15:32:12 +00:00
2018-12-06 15:44:34 +00:00
```html
2020-05-09 14:31:18 +00:00
< style type = 'text/scss' >
2018-12-06 15:44:34 +00:00
2018-10-23 12:16:30 +00:00
$colors: (color1: blue, color2: black, color3: red);
2018-12-06 15:44:34 +00:00
2018-10-23 12:16:30 +00:00
@each $key, $color in $colors {
.#{$color}-bg {background-color: $color;}
2018-12-06 15:44:34 +00:00
}
2018-10-23 12:16:30 +00:00
div {
height: 200px;
width: 200px;
}
< / style >
< div class = "blue-bg" > < / div >
< div class = "black-bg" > < / div >
< div class = "red-bg" > < / div >
2018-12-06 15:44:34 +00:00
```