Fix portuguese translations (#37051)
This commit is contained in:
committed by
GitHub
parent
94712af264
commit
d4f8b00c84
@ -7,10 +7,51 @@ localeTitle: Use @each para mapear itens em uma lista
|
|||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description"> O último desafio mostrou como o <code>@for</code> 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 <code>@each</code> 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. <blockquote> @each $ color em azul, vermelho, verde { <br> . # {$ color} -text {color: $ color;} <br> } </blockquote> Um mapa tem uma sintaxe ligeiramente diferente. Aqui está um exemplo: <blockquote> $ colors: (color1: azul, color2: vermelho, color3: verde); <br><br> @ cada tecla $, $ cor em $ cores { <br> . # {$ color} -text {color: $ color;} <br> } </blockquote> Observe que a variável <code>$key</code> é necessária para referenciar as chaves no mapa. Caso contrário, o CSS compilado teria <code>color1</code> , <code>color2</code> ... nele. Ambos os exemplos de código acima são convertidos no seguinte CSS: <blockquote> .blue-text { <br> cor azul; <br> } <br><br> .red-text { <br> cor vermelha; <br> } <br><br> .green-text { <br> cor verde; <br> } </blockquote></section>
|
<section id="description">
|
||||||
|
|
||||||
|
O último desafio mostrou como a diretiva <code>@for</code> usa um valor inicial e final para repetir um certo número de vezes. O Sass também oferece a diretiva <code>@each</code>, 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 <code>$key</code> é necessária para referenciar as chaves no mapa. Caso contrário, o CSS compilado teria <code>color1</code>, <code>color2</code> ... 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;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions"> Escreva uma diretiva <code>@each</code> que passe por uma lista: <code>blue, black, red</code> e atribua cada variável a uma classe <code>.color-bg</code> , onde a parte "color" muda para cada item. Cada classe deve definir a <code>background-color</code> da respectiva cor. </section>
|
<section id="instructions">
|
||||||
|
|
||||||
|
Escreva uma diretiva <code>@each</code> que passe por uma lista: <code>blue, black, red</code> e atribua cada variável a uma classe <code>.color-bg</code> , onde a parte "color" muda para cada item. Cada classe deve definir a <code>background-color</code> da respectiva cor.
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
<section id='tests'>
|
<section id='tests'>
|
||||||
|
Reference in New Issue
Block a user