SASS, e il CSS diventa facile da mantenere

1 luglio 2013

Scrivere un foglio di stile è 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

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.

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