SASS, e il CSS diventa facile da mantenere

Scrivere un foglio di stile CSS è una delle attività più comuni per chiunque lavori quotidianamente sviluppando per il Web. La struttura e la sintassi dei fogli di stile sono rimaste immutate fin dalla prima introduzione, nel lontano 1996:

.testo {
color: green;
}

Un susseguirsi di selettori che portano con se un elenco di proprietà, ognuna delle quali da applicarsi a tutti gli elementi della pagina identificati dal selettore che le racchiude.

>> Leggi come funzionano i selettori CSS

Questa struttura, seppur semplice ed efficiente, mostra presto alcune insite debolezze, ad esempio la difficoltà nell'esprimere in modo elegante costrutti che interessino più selettori:

/* === inizio campo di testo === */
.testo {
color: green;
}
.testo img {
display: block;
}
.testo img.sinistra {
float: left;
}
.testo img.destra{
float: right;
}
.testo em{
background-color: blue;
}
/* === fine campo di testo === */

L'esempio mostra come diventi difficile rappresentare il concetto che tutti i selettori espressi siano in realtà parte di un unico e più grande comportamento atteso, che interessa l'elemento con classe .testo e alcuni degli elementi in esso contenuti.

La soluzione in questi casi è, come nell'esempio, ricorrere ad appositi commenti per delimitare l'area interessata: ma non sarebbe stupendo poter scrivere una struttura nidificata e chiara come la seguente?

.testo{
color: green;
img {
display: block;
&.sinistra {
float: left;
}
&.destra {
float: right;
}
}
em {
background-color: blue;
}
}

Questa ed altre caratteristiche interessanti sono disponibili attraverso Sass: un'estensione dei classici CSS che comprende, fra l'altro, la possibilità di utilizzare variabili, di creare funzioni e di organizzare il nostro foglio di stile in più file.

Sass: Syntactically Awesome Stylesheets

Le features offerte da questa estensione CSS non sono interpretabili direttamente dal browser, ecco perché dobbiamo arricchire il nostro stack tecnologico con un compilatore, che accetti in ingresso uno o più file Sass e ne restituisca l'equivalente in CSS, pronto per essere incluso nella nostra pagina Web.

Installare il compilatore è un'operazione abbastanza semplice, unico prerequisito è possedere sul proprio computer l'interprete Ruby, anch'esso in ogni caso si può scaricare facilmente.

Una volta installato Ruby possiamo completare la procedure digitando da linea di comando l'istruzione:

gem install sass

seguita dal tasto invio.

Watch e compilazione automatica Scss

Il compilatore che abbiamo appena installato supporta due diverse sintassi, la prima 'Scss', è di fatto un superset dei CSS, significa che ogni file CSS è anche un file Scss; la seconda, meno usata, strizza l'occhio ad HAML e non verrà affrontata in questo articolo.

L'esempio che abbiamo sviluppato all'inizio dell'articolo è stato scritto in sintassi Scss e mostra come nidificare diversi selettori delegando al compilatore l'onere di sviluppare poi la derivante sintassi CSS; memorizzando l'esempio in un file main.css all'interno di una cartella scss nella root del nostro progetto ed eseguendo da linea di comando:

sass scss:css --watch

possiamo attivate il compilatore che, grazie al flag --watch resterà in ascolto di ogni modifica su ogni file all'interno della cartella scss traducendolo nella corrispondente sintassi CSS all'interno della cartella css.

Ora che abbiamo l'intero sistema installato e funzionante possiamo esplorare le principali potenzialità offerte da questo strumento: mixins, varibili, helper e estensioni.

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 SASS

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.