@for y @while
Estas sentencias funcionan como el @each pero a diferencia del anterior se encuentra asociado por lo general a números. Por ejemplo, si queremos realizar una iteración del 1 al 3 de forma que para cada uno de los valores del bucle (1..3) lo multiplicaremos por 30pixeles de forma que cuando compilemos tengamos una lista de ítems que use los i valores.
.item {
position: absolute;
right: 0;
@for $i from 1 through 3 {
&.item-#{$i} {
top: $i * 30px;
}
}
}Con esto conseguimos que para cada uno de los ítems tenga un valor de top diferente. Algo parecido sería si en lugar de usar el @for usamos el @while, la diferencia radica en que con el @while debemos ir actualizando el índice en cada iteración. Veamos cómo sería el ejemplo anterior utilizando un while:
$i: 1;
.item {
position: absolute;
right: 0;
@while $i < 4 {
&.item-#{$i} {
top: $i * 30px;
}
$i: $i + 1;
}
}