In questa lezione ci occupiamo dei costrutti iterativi messi a disposizione da SASS, i cosiddetti cicli, che consentono di gestire definizioni ripetitive.
| Ciclo | Descrizione |
|---|---|
| @for | Ripete le istruzioni un numero specificato di volte. |
| @each | Serve per le collezioni come map e list e cicla passando in rassegna ogni elemento. |
| @while | Cicla finché rimane verificata una certa condizione. |
Esaminiamo le direttive in dettaglio.
@for
La direttiva @for genera ripetutamente set di dichiarazioni, in un numero finito di cicli, in base al valore assunto da un contatore. La direttiva può essere definita secondo due strutture:
@for $var from <start> through <end>oppure
@for $var from <start> to <end>In entrambe le due direttive, $var è una variabile contatore, <start> e <end> sono due espressioni SassScript, che rappresentano il valore iniziale e finale del contatore. <start> può essere maggiore di <end>, ed in questo caso il valore del contatore decresce ad ogni giro.
A differenziare le due direttive troviamo to e through:
| Modalità | Descrizione |
|---|---|
| through | Il range include il valore <end>: il ciclo viene effettuato anche per considerando il valore finale |
| to | Il range esclude il valore <end>: quando viene raggiunto il valore finale si esce dal ciclo senza eseguire le instruzioni al suo interno. |
Vediamo ad esempio come assegnare la proprietà order ad elementi definiti in modalità Flexbox:
@mixin priority($levels){
@for $i from 1 to $levels{
.priority-#{$i - 1}{
-webkit-order: #{$i - 1};
order: #{$i - 1};
}
}
}
/*
* cell order
*/
@include priority(6);Il mixin priority accetta come argomento un numero intero che stabilisce il numero di ripetizioni del ciclo @for in esso contenuto. Ad ogni ciclo, viene prodotto un nome di selettore, grazie alla funzionalità dell'interpolazione. Infine, vengono generate le dichiarazioni -webkit-order e order, i cui valori vengono nuovamente generati tramite interpolazione. L'output CSS sarà il seguente:
.priority-0 {
-webkit-order: 0;
order: 0;
}
.priority-1 {
-webkit-order: 1;
order: 1;
}
.priority-2 {
-webkit-order: 2;
order: 2;
}
...@each
Grazie alla direttiva @each possiamo iterare tra gli elementi di una lista o di una mappa. Esaminiamone la sintassi:
@each $var in <list or map>$var assumerà ad ogni ciclo il valore di un diverso elemento della collezione.
Facciamo subito un esempio, e vediamo come generare un menu di navigazione a icone, iterando tra gli elementi di una lista di nomi di immagini:
@each $icon in home, contact, links, about, blog {
.#{$icon}-icon {
padding-left: 16px;
background-image: url(icons/#{$icon}.png) center left no-repeat;
}
}L'output CSS sarà il seguente:
.home-icon {
padding-left: 16px;
background-image: url(icons/home.png) center left no-repeat;
}
.contact-icon {
padding-left: 16px;
background-image: url(icons/contact.png) center left no-repeat;
}
...Ora basterà assegnare il nome di classe corretto ad ogni elemento a del menu.
La direttiva @each accetta anche l'assegnazione di variabili multiple, dove ad ogni variabile corrisponde una lista. Vediamo un esempio:
@each $icon, $bg-color, $border-color in
(home, #ffd5d5, #ab0a0a),
(contact, #cdffbe, #1c6605),
(links, #bdc5ff, #081787) {
.#{$icon}-icon {
padding-left: 16px;
background-image: url(icons/#{$icon}.png) center left no-repeat;
background-color: $bg-color;
border: 1px solid $border-color;
}
}Ad ogni ripetizione, ad ogni variabile sarà assegnato il suo valore tra quelli elencati tra parentesi. Il codice compilato è il seguente:
.home-icon {
padding-left: 16px;
background-image: url(icons/home.png) center left no-repeat;
background-color: #ffd5d5;
border: 1px solid #ab0a0a;
}
.contact-icon {
padding-left: 16px;
background-image: url(icons/contact.png) center left no-repeat;
background-color: #cdffbe;
border: 1px solid #1c6605;
}
.links-icon {
padding-left: 16px;
background-image: url(icons/links.png) center left no-repeat;
background-color: #bdc5ff;
border: 1px solid #081787;
}Le mappe non sono altro che liste di coppie $key: $val. Per questo c'è poca differenza rispetto all'iterazione delle liste. Un esempio molto semplice è il seguente:
@each $highlight, $color in (alert: red, quote: green, info: blue) {
div.#{$highlight} {
background-color: $color;
}
}Il CSS compilato sarà il seguente:
div.alert {
background-color: red;
}
div.quote {
background-color: green;
}
div.info {
background-color: blue;
}@while
La direttiva @while accetta un'espressione SassScript e ripete un ciclo finché l'espressione non genera il risultato false, e viene di solito utilizzata per cicli iterativi più complessi rispetto al ciclo @for.
$i: 4;
@while $i > 0 {
h#{5 - $i} { font-size: ($i * 0.66)em; }
$i: $i - 1;
}Quello che segue è il codice CSS compilato:
h1 { font-size: 2.64 em; }
h2 { font-size: 1.98 em; }
h3 { font-size: 1.32 em; }
h4 { font-size: 0.66 em; }