Introduzione a SASS e LESS: come utilizzare al meglio i CSS

Pubblicato il 07/09/2015

I CSS sono uno strumento potentissimo, in particolare nelle ultime versioni; hanno però dei limiti dovuti alla loro natura. Sono sicuro infatti che chiunque li usi continuativamente, per lavoro o per hobby, abbia avuto prima o poi delle necessità o esigenze comuni, quali:

• poter cambiare una serie di colori con semplicità;
• poter riutilizzare degli spezzoni di codice *standard*
• poter usare le operazioni matematiche nella realizzazione di template complessi;
• poter scrivere codice leggibile e non ridondante nelle dichiarazioni di classi, etc etc.

Queste esigenze le abbiamo avute un po' tutti: è per questo che negli ultimi anni sono nati dei pre-processori CSS per renderci il lavoro più facile. Tra tutti quelli più diffusi e usati sono due: LESS e SASS.

Entrambi permettono di risolvere le esigenze appena indicate e molte altre ancora introducendo in particolare cinque feature comodissime:

1. Le variabili
2. Le operazioni
3. Le regole annidate
4. Le funzioni (mixins)
5. Le importazioni di file e librerie

I due linguaggi, in pratica, si equivalgono nelle prestazioni, nella semplicità di utilizzo e nella curva di apprendimento: utilizzare uno o l'altro è semplicemente una questione di gusti personali. In questo articolo parleremo in particolare di SASS, perché lo scrivente lo preferisce (di poco) a LESS. Ma ciò che vedremo sarà praticamente riportabile verso LESS con pochissima difficoltà!

Ok ok, LESS ha un vantaggio in più: può essere usato direttamente con il file sorgente e non con il css generato, attraverso un file javascript scritto ad hoc. Per me cambia nulla, visto che usare un file sorgente in produzione è un'ipotesi non contemplata e perché aggiungere altro carico al browser credo sia un errore. Però per alcuni può essere un vantaggio. Valutate voi, insomma.

 

Cos'è SASS?

SASS è un pre-processore dei CSS, compatibile al 100% con la sintassi di quest'ultimi, che permette di lavorare con maggior semplicità e velocità sugli stessi.
Attenzione: SASS non è un framework tipo Bootstrap! È una sorta di linguaggio con in quale creare CSS e, volendo, interagire anche con framework CSS. In poche parole, SASS affianca i framework, non li sostituisce.

Come detto SASS è un linguaggio completamente compatibile con i CSS: ciò significa che si può iniziare il lavoro importando un vecchio foglio di stile per poi sfruttarne appieno la potenza.

 

Intermezzo: che differenza c'è tra SASS e scss?

Questa domanda mi è stata fatta molte volte, soprattutto da chi è alle prime armi: SASS è il linguaggio, .scss è l'estensione del file creato da SASS. In pratica, una volta che si salva un file con SASS, vengono creati due file: quello *sorgente* con estensione .scss che potrà esser riutilizzato per le modifiche e quello di *produzione* con estensione .css, il classico .css che siamo abituati ad usare, da inserire nelle pagine web

 

Come si installa SASS?

Sass è una gemma di Ruby, un linguaggio di programmazione eccezionale! Per poter installare SASS, quindi, è necessario che sul vostro computer sia presente Ruby.

• Se avete un Mac non incontrerete problemi in tal senso: Ruby è presente di default sulle ultime versioni di OS X

• Se siete su Windows il modo migliore è quello di usare il progetto Ruby Installer e seguire passo passo le istruzioni. Oddio, passo passo: basta scaricare il file auto-installante e lanciarlo. Fatto!

• Se, invece, utilizzate Linux la procedura ideale è quella di usare i gestori di pacchetti presenti nelle varie distro.
  In particolare se usate Debian o Ubuntu potrete utilizzare apt e di conseguenza lanciare il comando:

  sudo apt-get install ruby

  Su CentOS e Fedora il gestore di pacchetti di default è yum e quindi la sintassi da digitare è:

  sudo yum install ruby

 

Bene, ho Ruby installato sul mio sistema: come vi ci aggiungo SASS?

Una volta che avrete installato Ruby, da linea di comando, basta dare il seguente comando:

gem install sass

Se siete su una macchina Linux o Mac, probabilmente, vi serviranno i permessi di amministratore; in tal caso il comando da lanciare è:

sudo gem install sass

Una volta terminata l'operazione, per vedere se tutto è andata a buon fine, digitate:

sass -v

se tutto è a posto, leggerete sul terminale la versione installata di SASS.

 

Come si lavora con SASS

A questo punto, vi starete chiedendo: e ok, e ora? Cosa devo fare?

Ci sono varie strade che potrete percorrere:

• potete aprire un vecchio file css o crearne uno nuovo con il solito editor di testi usando le funzioni SASS necessarie, salvarlo come file.scss, e una volta fatto creare il file .css da terminale con il comando:

  sass [nomeFile].scss [percorso]/[nomeFile].css

  dove [nomefile] è il nome del file che volete e [percorso] è la directory di lavoro;
• potete dire a SASS di salvare automaticamente il file .css ogni volta che salvate con l'editor il file .scss, con il comando

  sass --watch [nomeFile].scss:[percorso]/[nomeFile].css

  in tal modo il preprocessore si mette in "ascolto" e se nota un cambiamento nel file .scss lo riporta, compilato, nel .css;
• potete usare un tool live, per così dire, che fa tutto per voi, come ad esempio takana;
• oppure potete usare le estensioni per il vostro IDE preferito.

 

Intermezzo: SASS ed IDE

Molti ambienti di sviluppo permettono l'uso di SASS con estensioni o addirittura nativamente. Ad esempio io utilizzo Coda con un plugin che, automaticamente, salva direttamente sia il file .scss che il file .css, e nei giusti percorsi.
Piccolo OT: Coda è probabilmente il miglior IDE esistente per i CSS (e ne ho provati tanti...). Purtroppo funziona solo su Mac e ha un costo di licenza non proprio basso. Ma, soprattutto se scrivete i CSS per lavoro, ne vale assolutamente la pena. Spero di riuscire a scrivere un articolo a riguardo al più presto...

 

Come funziona SASS?

SASS può essere utilizzato come un normale foglio di stile: come già detto è compatibile al 100% con i CSS. Questo significa poter scrivere il CSS come siete abituati finora o importare un vecchio file CSS e lavorarci.

 

Che cosa si può fare con SASS?

Moltissime cose: si possono assegnare variabili per cambiarle successivamente con estrema facilità, si possono usare librerie esterne meravigliose (tipo compass che sta ai CSS come jQuery sta al javascript), si possono manipolare i colori, variandoli per cromia, saturazione, luminosità etc, si possono creare degli snippets di codice, salvarli in un file esterno e reintrodurli facilmente per non riscrivere sempre gli stessi blocchi, si può usare la sintassi annidata, anche per le media queries, per avere un codice molto più leggibile, si possono usare funzioni matematiche tipo:

	.classe {width:(1+2)*0.25em;}

e molto altro ancora che vedremo in dettaglio in prossimi articoli, pertanto il consiglio è sempre lo stesso: continuate a seguirci!

Articoli sullo stesso argomento

• Introduzione a SASS e LESS
• Variabili, operazioni, operazioni, annidamento ed extend in SASS
• Funzioni, importazioni, librerie e framework in SASS