La direttiva @function

@function può essere considerata una generalizzazione di @mixin, ma mentre quest'ultimo viene utilizzato principalmente per arricchire un selettore con un set di proprietà, @function può essere utilizzata anche per fini differenti, come ad esempio calcolare il valore di una proprietà.

Una @function accetta dei parametri in ingresso, effettua una elaborazione e ritorna un valore utilizzando la direttiva @return.

Un caso d'uso abbastanza comune è la composizioni di valori lunghi o complessi, comuni in alcune nuove proprietà CSS3, come box-shadow o gradienti: ad esempio potremmo costruire una @function che sovrapponga un numero, definibile dall'utente, di bande colorate ad una immagine sempre scelta dall'utente; per fare questo dobbiamo creare un linear-gradient che, sapientemente, risponda all'input producendo un numero di bande consistenti con quanto richiesto.

Ecco la funzione (provalo online):

@function stripes($nr,$url) {
	$start: hsla(0,100%,50%,0.4);
	$step_1: 100% / $nr;
	$step_2: 360  / $nr;
	$stripe: "linear-gradient(to bottom, " + $start + " 0% ";
	@for $i from 0 through $nr {
		$stripe: $stripe + ", " + hsla($step_2 * $i, 100%, 50%,0.4) + ($step_1 * $i) + ", " + hsla($step_2 * ($i + 1), 100%, 50%, 0.4) + ($step_1 * $i) ;
	}
	$stripe: $stripe + ")";
	@return unquote($stripe + ", url(" + $url + ")");
}
div {
	width: 400px;
	height: 400px;
	background-image: stripes(15,"http://sandropaganotti.com/wp-content/goodies/misc/official_me.jpg");
}

ed ecco alcuni delle combinazioni ottenibili, modificando il valore delle bande si possono ottenere diversi interessanti risultati:

Ma come funziona? Per prima cosa calcoliamo i due incrementi che ci serviranno nel corso della funzione ($step_1 e $step_2), sappiamo che SASS può effettuare le operazioni mantenendo le giuste unità di misura, quindi dividendo 100% per il numero di bande otterremo un valore percentuale, mentre facendo lo stesso con 360 otterremo un valore intero.

• $step_1 ci aiuta nello stabilire il punto da cui deve partire una specifica banda di colore;
• $step_2 indica la distanza tra due colori adiacenti che useremo nella notazione di colore hsla (hue - saturation - lightness - alpha) per definire i colori tra le varie bande.

Una volta preparati questi due incrementi con un ciclo for generiamo tante iterazioni quante il numero di bande volute e per ognuna di essere facciamo combaciare, alla stessa distanza nell'immagine, la fine di una banda con l'inizio della successiva generando il linear-gradient voluto.

Ecco il CSS risultante dall'invocazione con 3 sole bande di colore:

div {
  width: 400px;
  height: 400px;
  background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.4) 0% , rgba(255, 0, 0, 0.4)0%, rgba(0, 255, 0, 0.4)0%, rgba(0, 255, 0, 0.4)33.33333%, rgba(0, 0, 255, 0.4)33.33333%, rgba(0, 0, 255, 0.4)66.66667%, rgba(255, 0, 0, 0.4)66.66667%, rgba(255, 0, 0, 0.4)100%, rgba(0, 255, 0, 0.4)100%), url(http://sandropaganotti.com/wp-content/goodies/misc/official_me.jpg);
}

Notiamo come, nonostante la @function utilizzi la notazione hsla, parte delle specifiche CSS3 e supportata dai browser più moderni, il CSS risultante contenga la più comune notazione rgba, questo perché hsla è anche una delle funzioni di manipolazione di colore offerte da SASS e quindi viene interpretata dal preprocessore.

Ma mentre hsla esiste anche all'interno delle specifiche CSS3 altre interessanti funzioni SASS per la manipolazione del colore sono uniche di questo preprocessore e possono portare ad interessanti risultati, ecco un esempio con darken, lighten e complement, tre funzioni che rendono il colore passato in ingresso rispettivamente più chiaro, più scuro o calcolano il complementare del colore dato (provalo online)

<!-- HTML -->
<a href="#">Submit</a>

/* SCSS */
@mixin colors($color) {
	background-color: $color;
	color: complement($color);
	&:hover {
		background-color: lighten($color,20%);
	}
	&:active {
		background-color: darken($color,20%);
	}
}
a {
	display: inline-block;
	padding: 10px;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	font-family: sans-serif;
	@include colors(#9d24ea);
}

Conclusioni

In questo capitolo abbiamo scoperto come trarre il massimo da SASS, creando @function personalizzate e approfittando delle funzioni di variazione colore offerte dal preprocessore. Tutto questo senza contare l'incredibile potenza che possiamo ottenere dalle nuove modalità di utilizzo delle media queries.