diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.portuguese.md b/curriculum/challenges/portuguese/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.portuguese.md
index e5792ee67b..5e00782117 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.portuguese.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.portuguese.md
@@ -7,10 +7,51 @@ localeTitle: Use @each para mapear itens em uma lista
---
## Description
- O último desafio mostrou como o @for
diretiva usa um valor inicial e final para fazer um loop em um determinado número de vezes. O Sass também oferece a diretiva @each
que faz um loop 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 em azul, vermelho, verde {
. # {$ color} -text {color: $ color;}
}
Um mapa tem uma sintaxe ligeiramente diferente. Aqui está um exemplo: $ colors: (color1: azul, color2: vermelho, color3: verde);
@ cada tecla $, $ cor em $ cores {
. # {$ color} -text {color: $ color;}
}
Observe que a variável $key
é necessária para referenciar as chaves no mapa. Caso contrário, o CSS compilado teria color1
, color2
... nele. Ambos os exemplos de código acima são convertidos no seguinte CSS: .blue-text {
cor azul;
}
.red-text {
cor vermelha;
}
.green-text {
cor verde;
}
+
+
+O último desafio mostrou como a diretiva @for
usa um valor inicial e final para repetir um certo número de vezes. O Sass também oferece a diretiva @each
, que percorre cada item em uma lista ou mapa. Em cada iteração, a variável é atribuída ao valor atual da lista ou mapa.
+
+```scss
+@each $color in blue, red, green {
+ .#{$color}-text {color: $color;}
+}
+```
+
+Um mapa tem uma sintaxe ligeiramente diferente. Aqui está um exemplo:
+
+```scss
+$colors: (color1: blue, color2: red, color3: green);
+
+@each $key, $color in $colors {
+ .#{$color}-text {color: $color;}
+}
+```
+
+Observe que a variável $key
é necessária para referenciar as chaves no mapa. Caso contrário, o CSS compilado teria color1
, color2
... nele.
+Os dois exemplos de código acima são convertidos no seguinte CSS:
+
+```scss
+.blue-text {
+ color: blue;
+}
+
+.red-text {
+ color: red;
+}
+
+.green-text {
+ color: green;
+}
+```
+
+
## Instructions
- Escreva uma diretiva @each
que passe por uma lista: blue, black, red
e atribua cada variável a uma classe .color-bg
, onde a parte "color" muda para cada item. Cada classe deve definir a background-color
da respectiva cor.
+
+
+Escreva uma diretiva @each
que passe por uma lista: blue, black, red
e atribua cada variável a uma classe .color-bg
, onde a parte "color" muda para cada item. Cada classe deve definir a background-color
da respectiva cor.
+
+
## Tests