Iterare in Sass con le strutture dei cicli: for, each e while
Sass consente di utilizzare i cicli in modo da iterare un blocco di istruzioni. Per poter iterare un numero finito di cicli esiste la direttiva @for che genera ripetutamente set di dichiarazioni in base al valore assunto da un contatore. La sintassi per poter utilizzare la direttiva utilizza due variabili per il valore di partenza e quello di arrivo:
Se il valore di <start> risulta maggiore di <end>, il contatore decresce. Se si volesse includere nel ciclo il valore di <fine>, è possibile utilizzare la clausola to:
Il ciclo each per iterare le collezioni
La direttiva @each consente di iterare gli elementi di una lista o di una mappa. La sua sintassi è:
Ad ogni iterazione, la variabile $elem conterrà un elemento della collezione.
Ecco un esempio di ciclo each:
.#{$icon}-icon {
padding-left: 16px;
background-image: url(icons/#{$icon}.png) center left no-repeat;
}
}
Il ciclo while in Sass
La direttiva @while accetta un’espressione SassScript e ripete un ciclo finché l’espressione non diventa falsa. Un esempio di ciclo while è il seguente:
Ad ogni iterazione verrà imposta la dimensione del font per i vari tag header.
@while $i < 0 {
h#{6 - $i} { font-size: ($i * 0.50)em; }
$i: $i - 1;
}
Ecco l’elenco delle lezioni su Sass:
- Indice
- SASS: un preprocessore per generare file CSS
- Nidificare gli elementi e le proprietà
- Le variabili nei file CSS
- Le classi in Sass
- I file parziali
- Le media query
- La direttiva if
- I cicli for, each e while
- I mixin in Sass
- Differenze tra extend e include (mixin) in Sass
- Compass, un tool di sviluppo per Sass
Lascia un commento