---
id: 587d7dbf367417b2b2512bba
title: Use @each to Map Over Items in a List
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
raw: true
challengeType: 0
---
## Description
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.
@each $color in blue, red, green {
.#{$color}-text {color: $color;}
}
A map has slightly different syntax. Here's an example:
$colors: (color1: blue, color2: red, color3: green);
@each $key, $color in $colors {
.#{$color}-text {color: $color;}
}
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:
.blue-text {
color: blue;
}
.red-text {
color: red;
}
.green-text {
color: green;
}
## Instructions
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.
## Tests
```yml
tests:
- text: Your code should use the @each directive.
testString: assert(code.match(/@each /g), 'Your code should use the @each directive.');
- text: Your .blue-bg class should have a background-color of blue.
testString: assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)', 'Your .blue-bg class should have a background-color of blue.');
- text: Your .black-bg class should have a background-color of black.
testString: assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)', 'Your .black-bg class should have a background-color of black.');
- text: Your .red-bg class should have a background-color of red.
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
The solution requires using the $color variable twice: once for the class name and once for setting the background color. You can use either the list or map data type.
### List Data type
```js
```
### Map Data type
```js
```