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

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d7dbf367417b2b2512bba	Usar @each para mapear sobre itens em uma lista	0	301461	use-each-to-map-over-items-in-a-list

--description--

O último desafio mostrou como a diretiva @for usa valores de início e fim para iterar uma quantidade determinada de vezes. Sass também oferece a diretiva @each a qual itera sobre cada item em uma lista ou mapa. Em cada iteração, a variável é atribuída ao valor atual da lista ou do mapa.

@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}

Um mapa possui uma sintaxe ligeiramente diferente. Exemplo:

$colors: (color1: blue, color2: red, color3: green);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}

Note que a variável $key é necessária para referenciar as chaves no mapa. Caso contrário, o CSS compilado teria nele color1, color2 e assim por diante. Os dois exemplos de código acima são convertidos para os CSS seguintes:

.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}

--instructions--

Escreva uma diretiva @each que passar por uma lista: blue, black, red e atribui cada variável à classe .color-bg, aonde a parte color altera para cada item. Cada classe deve definir a propriedade background-color para a respectiva cor.

--hints--

O código deve usar a diretiva @each.

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

A classe .blue-bg deve ter a propriedade background-color definida com o valor blue.

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

A classe .black-bg deve ter a propriedade background-color com o valor black.

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

A classe .red-bg deve ter a propriedade background-color com o valor 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>