3.4 KiB
3.4 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d7dbe367417b2b2512bb9 | Use @for to Create a Sass Loop | 0 | Usa @for para crear un Sass Loop |
Description
@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 {La parte
.col - # {$ i} {ancho: 100% / 12 * $ i; }
}
#{$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 {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.
ancho: 8.33333%;
}
.col-2 {
ancho: 16.66667%;
}
...
.col-12 {
ancho: 100%;
}
Instructions
@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