<sectionid="description"> El último desafío mostró cómo la directiva <code>@for</code> utiliza un valor de inicio y final para realizar un bucle un cierto número de veces. Sass también ofrece la directiva <code>@each</code> 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. <blockquote>@each $ color en azul, rojo, verde { <br> . # {$ color} -text {color: $ color;} <br> } </blockquote> Un mapa tiene una sintaxis ligeramente diferente. Aquí hay un ejemplo: <blockquote> $ colores: (color1: azul, color2: rojo, color3: verde); <br><br>@each $ clave, $ color en $ colores { <br> . # {$ color} -text {color: $ color;} <br> } </blockquote> Tenga en cuenta que la variable <code>$key</code> es necesaria para hacer referencia a las claves en el mapa. De lo contrario, el CSS compilado tendría <code>color1</code> , <code>color2</code> ... en él. Los dos ejemplos de código anteriores se convierten en el siguiente CSS: <blockquote> .blue-text { <br> color azul; <br> } <br><br> .red-text { <br> color rojo; <br> } <br><br> .green-text { <br> color verde; <br> } </blockquote></section>
<sectionid="instructions"> Escriba una directiva <code>@each</code> que pase por una lista: <code>blue, black, red</code> y asigne cada variable a una clase <code>.color-bg</code> , donde la parte de "color" cambia para cada elemento. Cada clase debe establecer el <code>background-color</code> respectivo. </section>
- 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.");'