freeCodeCamp

3.4 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7dbe367417b2b2512bb9	Use @for to Create a Sass Loop	0		Usa @for para crear un Sass Loop

Description

La directiva @for agrega estilos en un bucle, muy similar a un bucle for en JavaScript. @for se usa de dos maneras: "de principio a fin" o "de principio a fin". La principal diferencia es que "de principio a fin" excluye el número final, y "de principio a fin" incluye el número final. Aquí hay un ejemplo de principio a fin:

@for $ i de 1 a 12 {
.col - # {$ i} {ancho: 100% / 12 * $ i; }
}

La parte #{$i} es la sintaxis para combinar una variable ( i ) con texto para formar una cadena. Cuando el archivo Sass se convierte a CSS, se ve así:

.col-1 {
ancho: 8.33333%;
}

.col-2 {
ancho: 16.66667%;
}

...

.col-12 {
ancho: 100%;
}

Esta es una forma poderosa de crear un diseño de cuadrícula. Ahora tienes doce opciones para los anchos de columna disponibles como clases CSS.

Instructions

Escriba una directiva @for que tome una variable $j que va de 1 a 6. Debe crear 5 clases llamadas .text-1 a .text-5 donde cada una tiene un font-size establecido en 10px multiplicado por el índice.

Tests

tests:
  - text: Su código debe utilizar la directiva <code>@for</code> .
    testString: 'assert(code.match(/@for /g), "Your code should use the <code>@for</code> directive.");'
  - text: Su clase <code>.text-1</code> debe tener un <code>font-size</code> de <code>font-size</code> de 10px.
    testString: 'assert($(".text-1").css("font-size") == "10px", "Your <code>.text-1</code> class should have a <code>font-size</code> of 10px.");'
  - text: Su clase <code>.text-2</code> debe tener un <code>font-size</code> de <code>font-size</code> de 20px.
    testString: 'assert($(".text-2").css("font-size") == "20px", "Your <code>.text-2</code> class should have a <code>font-size</code> of 20px.");'
  - text: Su clase <code>.text-3</code> debe tener un <code>font-size</code> de <code>font-size</code> de 30px.
    testString: 'assert($(".text-3").css("font-size") == "30px", "Your <code>.text-3</code> class should have a <code>font-size</code> of 30px.");'
  - text: Su clase <code>.text-4</code> debe tener un <code>font-size</code> de <code>font-size</code> de 40px.
    testString: 'assert($(".text-4").css("font-size") == "40px", "Your <code>.text-4</code> class should have a <code>font-size</code> of 40px.");'
  - text: Su clase <code>.text-5</code> debe tener un <code>font-size</code> de <code>font-size</code> de 50px.
    testString: 'assert($(".text-5").css("font-size") == "50px", "Your <code>.text-5</code> class should have a <code>font-size</code> of 50px.");'

Challenge Seed

<style type='text/sass'>



</style>

<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>

Solution

// solution required

3.4 KiB Raw Blame History