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