Cos’è e come installare SASS?

In questa guida introduttiva, parleremo di uno dei pre-processori CSS più usati e apprezzati, ovvero Sass. Nel corso delle prossime lezioni illustreremo alcuni dei concetti fondamentali per poter iniziare a utilizzare Sass. Useremo la versione 3.5.4 di LibSass attraverso il wrapper node-sass che installeremo tramite NPM.

Per un riepilogo della sintassi e della terminologia tipica del linguaggio CSS è possibile consultare la seguente lezione prima di proseguire con il resto della guida.

Cos’è Sass

Sass (acronimo di Syntactically Awesome StyleSheets) è un’estensione del linguaggio CSS che aggiunge alcune utili funzionalità come variabili, mixin, funzioni e regole annidate mantenendo però la piena compatibilità con la sintassi tipica del CSS.

Grazie a Sass è possibile semplificare l’organizzazione e la manutenzione dei fogli di stile attraverso una serie di funzionalità che non solo lo rendono uno strumento flessibile, ma permettono di strutturare un progetto in maniera più efficiente. Sass costituisce una soluzione affidabile visto che si tratta di progetto maturo con una ricca community di sviluppatori alle spalle.

Sass è stato inizialmente sviluppato in Ruby. In passato era quindi necessario installare Ruby e, dopo aver installato la relativa Gem, era possibile iniziare ad utilizzarlo via linea di comando. Per migliorare le prestazioni e facilitare l’integrazione con altri strumenti, Sass è stato riscritto in C/C++ ed è stata creata la libreria che prende il nome di LibSass. È comunque ancora possibile installare RubySass in alternativa.

Bisogna sottolineare che non si può utilizzare direttamente LibSass, ma è necessario un wrapper. Esistono numerosi wrapper per diversi linguaggi di programmazione. Nel corso di questa guida, provvederemo ad installare node-sass attraverso NPM. (Prima di usare NPM è necessario installare Node.js)

Installare Sass

Per prima cosa installiamo globalmente il package node-sass attraverso NPM:

npm i -g node-sass

Il comando riportato sopra installa node-sass globalmente (è equivalente a npm install –global node-sass) così da poterlo lanciare via linea di comando.

Verificare l’installazione e lanciare il compilatore via linea di comando

Al termine dell’installazione possiamo eseguire il seguente comando per verificare qual è la versione installata.

node-sass -v
node-sass       4.9.0   (Wrapper)       [JavaScript]
libsass         3.5.4   (Sass Compiler) [C/C++]

Un’altra opzione estremamente utile è –help che mostra a video come usare il comando node-sass ed elenca le opzioni disponibili.

node-sass --help

Nella prossima lezione vedremo come utilizzare il compilatore per convertire un file .scss in css.