freeCodeCamp

3.1 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7dbf367417b2b2512bba	Use @each to Map Over Items in a List	0		Utilice @each para asignar sobre elementos en una lista

Description

El último desafío mostró cómo la directiva @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 {
. # {$ color} -text {color: $ color;}
}

Un mapa tiene una sintaxis ligeramente diferente. Aquí hay un ejemplo:

$ colores: (color1: azul, color2: rojo, color3: verde);

@each $ clave, $ color en $ colores {
. # {$ color} -text {color: $ color;}
}

Tenga en cuenta que la variable $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

Escriba una directiva @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

3.1 KiB Raw Blame History