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

id, title, required, challengeType

id	title	required	challengeType
587d7dbf367417b2b2512bba	Use @each to Map Over Items in a List	src raw https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js true	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

- text: Your code should use the <code>@each</code> directive.
  testString: 'assert(code.match(/@each /g), ''Your code should use the <code>@each</code> directive.'');'
- text: Your <code>.blue-bg</code> class should have a <code>background-color</code> of blue.
  testString: 'assert($(''.blue-bg'').css(''background-color'') == ''rgb(0, 0, 255)'', ''Your <code>.blue-bg</code> class should have a <code>background-color</code> of blue.'');'
- text: Your <code>.black-bg</code> class should have a <code>background-color</code> of black.
  testString: 'assert($(''.black-bg'').css(''background-color'') == ''rgb(0, 0, 0)'', ''Your <code>.black-bg</code> class should have a <code>background-color</code> of black.'');'
- text: Your <code>.red-bg</code> class should have a <code>background-color</code> of red.
  testString: 'assert($(''.red-bg'').css(''background-color'') == ''rgb(255, 0, 0)'', ''Your <code>.red-bg</code> class should have a <code>background-color</code> of red.'');'

Challenge Seed

<style type='text/sass'>
  
  
  
  div {
    height: 200px;
    width: 200px;
  }
</style>

<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>

Solution

// solution required