@if, controlli condizionali in SASS

SassScript è il set di estensioni che permette di utilizzare in SASS funzioni, mixin e variabili. Come per tutti i linguaggi di scripting che si rispettino, non mancano le strutture di controllo flusso: per modificare la generazione di stili al verificarsi di determinate condizioni, oppure ripetere un ciclo per un numero finito di volte, in modo da includere ripetutamente lo stesso stile con determinate variazioni.

In questa lezione iniziamo con le direttive condizionali

La direttiva @if

La direttiva @if, altra cosa rispetto alla funzione if(), accetta un'espressione SassScript e genera un dato blocco di dichiarazioni se l'espressione riporta un qualunque risultato diverso da false o null.

La direttiva permette di generare, al verificarsi di una condizione, interi blocchi di dichiarazioni, oppure dichiarazioni singole. Nell'esempio che segue, è stata impiegata all'interno del mixin colors:

// set template
// possible values dark, bright
$template: dark;
// template colors
$bg-dark: #000;
$fg-dark: #999;
$bg-bright: #eeee99;
$fg-bright: #eeee99;
@mixin colors {
	@if $template == dark {
		background-color: $bg-dark;
		color: $fg-bright;
	}
	@if $template == bright {
		background-color: $bg-bright;
		color: $fg-dark;
	}
}
body{
	@include colors;
}

Il CSS compilato sarà il seguente:

body {
	background-color: #000;
	color: #eeee99;
}

I vantaggi sono intuibili. Una volta progettato il file .scss, per cambiare template basterà cambiare il valore della variabile @template e Sass compilerà automaticamente un nuovo file .css.

In questo secondo esempio, testeremo una sola condizione ($background == dark), utilizzando la clausola @else nel caso in cui questa non sia verificata:

body{
	@if $template == dark {
		background-color: $bg-dark;
		color: $fg-bright;
	} @else {
		background-color: $bg-bright;
		color: $fg-dark;
	}
}

Abbiamo eliminato il mixin e generato due possibili set di proprietà a seconda del valore di $template.

Nell'esempio che segue, infine, abbiamo incluso interi blocchi di dichiarazioni all'interno di ognuna delle condizioni testate:

@if $template == dark {
	body{
		background-color: $bg-dark;
		color: $fg-bright;
	}
} @else if $template == bright{
	body{
		background-color: $bg-bright;
		color: $fg-dark;
	}
} @else {
	body{
		background-color: $bg-green;
		color: $fg-green;
	}
}

Per testare una condizione, oltre alla direttiva @if, SassScript dispone della funzione if(). Questa permette di testare solo una condizione vero/falso, al verificarsi della quale restituisce uno specifico valore, in modo simile ad un operatore ternario di altri linguaggi. Vediamo un esempio:

@mixin highlight( $condition ){
	$color: if( $condition, rgba(255, 0, 0, 0.2), rgba(0, 255, 0, 0.3) );
	div.highlight {
		background-color: $color;
	}
}
@include highlight( false );

Il codice compilato risulterà nel seguente blocco:

div.highlight {
	background-color: rgba(0, 255, 0, 0.3);
}