@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%;
}
@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. @for
.
testString: 'assert(code.match(/@for /g), "Your code should use the @for
directive.");'
- text: Su clase .text-1
debe tener un font-size
de font-size
de 10px.
testString: 'assert($(".text-1").css("font-size") == "10px", "Your .text-1
class should have a font-size
of 10px.");'
- text: Su clase .text-2
debe tener un font-size
de font-size
de 20px.
testString: 'assert($(".text-2").css("font-size") == "20px", "Your .text-2
class should have a font-size
of 20px.");'
- text: Su clase .text-3
debe tener un font-size
de font-size
de 30px.
testString: 'assert($(".text-3").css("font-size") == "30px", "Your .text-3
class should have a font-size
of 30px.");'
- text: Su clase .text-4
debe tener un font-size
de font-size
de 40px.
testString: 'assert($(".text-4").css("font-size") == "40px", "Your .text-4
class should have a font-size
of 40px.");'
- text: Su clase .text-5
debe tener un font-size
de font-size
de 50px.
testString: 'assert($(".text-5").css("font-size") == "50px", "Your .text-5
class should have a font-size
of 50px.");'
```
Hello
Hello
Hello
Hello
Hello
```