3.2 KiB
3.2 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||||
---|---|---|---|---|---|---|---|---|---|---|
587d7dbf367417b2b2512bba | Use @each to Map Over Items in a List |
|
0 | Utilice @each para asignar sobre elementos en una lista |
Description
@for
utiliza un valor de inicio y final para realizar un bucle un cierto número de veces. Sass también ofrece la directiva @each
que recorre cada elemento en una lista o mapa. En cada iteración, la variable se asigna al valor actual de la lista o mapa. @each $ color en azul, rojo, verde {Un mapa tiene una sintaxis ligeramente diferente. Aquí hay un ejemplo:
. # {$ color} -text {color: $ color;}
}
$ colores: (color1: azul, color2: rojo, color3: verde);Tenga en cuenta que la variable
@each $ clave, $ color en $ colores {
. # {$ color} -text {color: $ color;}
}
$key
es necesaria para hacer referencia a las claves en el mapa. De lo contrario, el CSS compilado tendría color1
, color2
... en él. Los dos ejemplos de código anteriores se convierten en el siguiente CSS: .blue-text {
color azul;
}
.red-text {
color rojo;
}
.green-text {
color verde;
}
Instructions
@each
que pase por una lista: blue, black, red
y asigne cada variable a una clase .color-bg
, donde la parte de "color" cambia para cada elemento. Cada clase debe establecer el background-color
respectivo. Tests
tests:
- text: Su código debe utilizar la directiva <code>@each</code> .
testString: 'assert(code.match(/@each /g), "Your code should use the <code>@each</code> directive.");'
- text: Tu clase <code>.blue-bg</code> debería tener un <code>background-color</code> de <code>background-color</code> azul.
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: Tu clase <code>.black-bg</code> debe tener un <code>background-color</code> de <code>background-color</code> negro.
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: Tu clase <code>.red-bg</code> debe tener un <code>background-color</code> de <code>background-color</code> rojo.
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