1.6 KiB
1.6 KiB
title | localeTitle |
---|---|
Use @for to Create a Sass Loop | Usa @for para crear un Sass Loop |
Usa @for para crear un Sass Loop
- La sintaxis básica de
@for
loop en SASS:
- A través del bucle:
@for $i from <start number> through <end number> {
// some CSS
}
- Para - hacer un bucle:
@for $i from <start number> to <end number> {
// some CSS
}
Tenga en cuenta que la principal diferencia es que "de principio a fin" excluye el número final, e "de principio a fin" incluye el número final.
- Por ejemplo:
- A través del bucle:
@for $i from 1 through 3 {
// some CSS
}
// 1 2
- Para - hacer un bucle:
@for $i from 1 to 3 {
// some CSS
}
// 1 2 3
- Guía de SASS Guía de
El ciclo @for
puede ser útil cuando se combina con pseudo-clases CSS ' :nth-*
. Excepto en estos escenarios, prefiera un bucle @each
si tiene que iterar sobre algo.
@for $i from 1 through 10 {
.foo:nth-of-type(#{$i}) {
border-color: hsl($i * 36, 50%, 50%);
}
}
Siempre use $i
como nombre de variable para cumplir con la convención habitual y, a menos que tenga una buena razón para hacerlo, nunca use la palabra clave to: use siempre. Muchos desarrolladores ni siquiera saben que Sass ofrece esta variación; su uso podría conducir a la confusión.
También asegúrese de respetar esas pautas para preservar la legibilidad:
- Siempre una nueva línea vacía antes de
@for
; - Siempre una nueva línea vacía después de la llave de cierre (}) a menos que la siguiente línea sea una llave de cierre (}).