@for, @each e @while, i cicli in SASS

7 dicembre 2015

In questa lezione ci occupiamo dei costrutti iterativi messi a disposizione da SASS, i cosiddetti cicli, che consentono di gestire definizioni ripetitive.

CicloDescrizione
@forRipete le istruzioni un numero specificato di volte.
@eachServe per le collezioni come map e list e cicla passando in rassegna ogni elemento.
@whileCicla 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
throughIl range include il valore <end>: il ciclo viene effettuato anche per considerando il valore finale
toIl 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; }

Riferimenti

Tutte le lezioni

1 ... 7 8 9 ... 18

Se vuoi aggiornamenti su @for, @each e @while, i cicli in SASS inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su @for, @each e @while, i cicli in SASS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy