SASS, e il CSS diventa facile da mantenere

1 luglio 2013

Mixins

Tipicamente una pagina Web è sviluppata utilizzando una combinazione di almeno due font, ognuno dei quali declinato in diversi colori e dimensioni. Potremmo perciò trovarci a scrivere qualcosa come:

.corpo{
	font-family: Verdana, sans-serif;
	font-size: 1.2em;
	color: green;
}
.corpo .quote{
	font-family: Arial, serif;
	font-size: 1.3em;
	color: black;
}
footer p{
	font-family: Verdana, sans-serif;
	font-size: 0.8em;
	color: grey;
}

Questo approccio rende il codice CSS sviluppato di difficile gestione, con la sintassi Scss possiamo invece creare un mixin delegato alla gestione di queste scelte tipografiche ed utilizzarlo all’interno dei selettori:

@mixin tipografia( $family: serif, $size: 1em, $color: grey) {

	@if $family == serif {
		font-family: Arial, serif;
	} @else {
		font-family: Verdana, sans-serif;
	}
	font-size: $size;
	color: $color;
}

.corpo {
	@include tipografia(sans-serif, 1.2em, green);

	.quote {
		@include tipografia($size: 1.3em, $color: black);
	}
}

footer p {
	@include tipografia($family: sans-serif, $size: 0.8em);
}

Notiamo come il mixin possa avere dei valori di default per i parametri, e come questo possa essere utilizzato a nostro vantaggio consentendoci di specificare di volta in volta soltanto quei parametri che differiscono dai valori di default.

Variabili ed helpers

L’utilizzo di variabili all’interno del foglio di stile può facilitare enormemente la sua organizzazione, ad esempio è buona pratica raccogliere tutti i colori utilizzati all’interno di appropriate variabili, in questo modo non solo si avrà una migliore visione dei colori scelti per la realizzazione, ma sarà anche facilmente possibile agire e modificare quei colori in un unico punto del foglio di stile propagando il cambiamento su tutta la pagina:

/* -- colori -- */
$chiaro1: rgb(255,255,255);
$chiaro2: rgb(124,124,124);
$scuro1: rgb(33,33,33);
$scuro2: rgb(0,0,0);

.container{
	background-color: $chiaro1;
}

Nel costruire la palette possiamo avvalerci anche di alcuni comodi helpers messi a disposizione da Sass che ci consentono di operare delle variazioni ai colori precedentemente memorizzati, ad esempio:

.testo{
	color: darken($chiaro2, 30%);
}

Le funzioni a disposizione sono moltissime, quella appena mostrata ci consente di ottenere una versione al 30% più scura di uno dei colori della nostra palette. Nella documentazione possiamo trovare L’elenco delle funzioni completo.

I CSS3 hanno introdotto la possibilità di dichiarare dei colori con un grado di opacità, ad esempio: rgba(0,0,0,0.5) per un nero al 50% trasparente. Ovviamente questa dichiarazione non viene accettata dai browser meno recenti; si rende quindi necessario provvedere ad un meccanismo di fallback che solitamente si configura in questo modo:

.container{
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.5);
}

Una struttura di questo tipo è considerata sicura, in quanto il browser carente del supporto per l’opacità ignorerà la seconda istruzione mantenendo comunque il colore memorizzato nella prima; viceversa il browser moderno sovrascriverà la prima istruzione con la seguente avendo quindi il colore nella sua corretta gradazione di trasparenza.

Possiamo avvalerci ancora una volta dei mixin per automatizzare questo comportamento:

/* -- colori -- */
$scuro_trasparente: rgba(0,0,0,0.5);
@mixin fallback_colore($proprieta, $colore_rgba) {
	#{$proprieta}: rgb(red($colore_rgba), green($colore_rgba), blue($colore_rgba));
	#{$proprieta}: $colore_rgba;
}
.container{
	@include fallback_colore(background-color, $scuro_trasparente);
}

Extend

Il lato negativo dei @mixin è che nel CSS risultante dalla compilazione del nostro file SCSS avremo una copia di quanto contenuto nel @mixin istanziata all’interno di ogni selettore che faccia uso dell’istruzione @include. Questo significa che se ipotizziamo un’errato uso dei @mixin come il seguente:

@mixin ombra_e_bordo_arrotondato {
	box_shadow: 0 0 10px rgb(0,0,0);
	border: 1px solid rgb(0,0,0);
	border-radius: 10px;
}
.uno{
	@include ombra_e_bordo_arrotondato();
	background-color: red;
}
.due{
	@include ombra_e_bordo_arrotondato();
	background-color: blue;
}
.tre{
	@include ombra_e_bordo_arrotondato();
	background-color: green;
}

Otterremo un CSS di 3 selettori con 4 proprietà ognuno: tre delle quali ottenute dalla semplice ripetizione dello stesso set di proprietà per i tre selettori. Ampliando l’esempio è facile immaginare come il nostro foglio di stile possa facilmente crescere in dimensione peggiorando le performance della pagina che lo ospita.

Fortunatamente SASS mette a disposizione un’istruzione alternativa per gestire tutte quelle casistiche in cui abbiamo semplicemente necessità di ripetere la stessa porzione di proprietà CSS tra diversi selettori: @extend

.ombra_e_bordo_arrotondato{
	box_shadow: 0 0 10px rgb(0,0,0);
	border: 1px solid rgb(0,0,0);
	border-radius: 10px;
}
.uno{
	@extend .ombra_e_bordo_arrotondato;
	background-color: red;
}
.due{
	@extend .ombra_e_bordo_arrotondato;
	background-color: blue;
}
.tre{
	@extend .ombra_e_bordo_arrotondato;
	background-color: green;
}

Se osserviamo il risultato della compilazione delle precedente porzione di codice notiamo come il compilatore abbia tratto vantaggio dalla sintassi CSS per minimizzare la dimensione del foglio di stile risultante, accodando tutti i selettori al medesimo set di proprietà:

.ombra_e_bordo_arrotondato, .uno, .due, .tre {
	box_shadow: 0 0 10px black;
	border: 1px solid black;
	border-radius: 10px;
}
.uno {
	background-color: red;
}
.due {
	background-color: blue;
}
.tre {
	background-color: green;
}

Conclusioni

La tecnologia SASS consente di costruire fogli di stile più flessibili, maggiormente strutturati e con una migliore leggibilità. Con questo articolo ci siamo limitati ad una panoramica delle funzioni principali lasciando alla documentazione online il compito fornire i dovuti dettagli. Al prossimo appuntamento esploreremo Compass, una libreria che aggiunge a SASS interessanti funzioni per la costruzione di layout a griglia e per la gestione dei prefissi sperimentali nei CSS3.

Se vuoi aggiornamenti su SASS, e il CSS diventa facile da mantenere inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su SASS, e il CSS diventa facile da mantenere

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