freeCodeCamp/curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d7dbf367417b2b2512bba	Use @each to Map Over Items in a List	0	301461	use-each-to-map-over-items-in-a-list

--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.

--hints--

Your code should use the @each directive.

assert(code.match(/@each /g));

Your .blue-bg class should have a background-color of blue.

assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');

Your .black-bg class should have a background-color of black.

assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');

Your .red-bg class should have a background-color of red.

assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)');

--seed--

--seed-contents--

<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--

<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>

---

<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>