SASS, LESS, SCSS: l'estensione del linguaggio CSS. Cosa sono e come effettuare la compilazione in css.

di Giulio di Bari :: 10 novembre 2020

Sass e Less sono chiamati "preprocessori css" e sono una evoluzione dei fogli di stile, che consentono di utilizzare funzionalità che normalmente sarebbero esclusive dei linguaggi di programmazione, come l'utilizzo di variabili e funzioni. Lo scopo è quello di velocizzare la scrittura di codice e migliorare il suo mantenimento.

Ad esempio Bootstrap utilizza SASS per cui se utilizzate quel framework sarete più propensi ad utilizzare SASS, ma in generale non esiste un reale motivo per propendere per l'uno o per l'altro.

Sass e Less sono linguaggi simili, e fanno praticamente la stessa cosa. Sass tuttavia consente due diverse sintassi:

SASS: noto anche come "sintassi indentata"
SCSS : una sintassi simile a CSS

I browser leggono solo codice CSS, per questo motivo i file Sass e Less devono essere poi convertiti ("compilati") in normali file CSS. Da qui il termine di "preprocessori css".

Per effettuare questa compilazione ci sono varie possibilità alternative:

si utilizza la riga di comando
se modificate frequentemente i fogli di stile, è possibile utilizzare un File Watcher, cioè è possibile monitorare in tempo reale le modifiche che si verificano ai fogli di stile e in caso di modifiche ai file LESS o SASS, il File Watcher crea automaticamente il file css. Vari IDE come Visual Studio Code, Atom, Sublime, PhpStorm, .... hanno questa possibilità. Oppure è possibile attivarlo da riga di comando.
è possibile utilizzare programmi come ad esempio Gulp o Grunt

In questo articolo vediamo come operare la compilazione, e come attivare il watcher, da riga di comando.

Come installare SASS o LESS

SASS e LESS non sono dei linguaggi nativi, quindi vanno installati sul nostro pc prima di poterli utilizzare. Per installarli si utilizza NODE.js, noto framework utilizzato per realizzare applicazioni web in Javascript lato server.

Quindi in primis devi installare node.js, e per questo ti rimando all'articolo dedicato in cui ti spiego come installarlo scaricando il codice sorgente dal sito ufficiale o, su Linux, utilizzando strumenti come yum o dnf.

Dopo averlo insallato potrai utilizzare lo strumento NPM, Node Package Manager, che consente di installare delle librerie (moduli). Anche su questo argomento ti rimando all'articolo dedicato.

Con Node.js, e quindi NPM, possiamo finalmente procedere all'installazione di SASS o LESS.

Per installare SASS, e quindi anche SCSS, digita

# npm install -g sass

Per installare LESS

# npm install -g less

Dopo averli installati potrete compilare i file .sass, .scss e .less

Come compliare da riga di comando un file .sass o .scss

Esistono vari modi per compilare i nostri file, ed ottenere un css. In questo articolo vediamo come effettuare la compilazione da riga di comando.

Creiamo una cartella chiamata "prova". Se operate in Linux utilizzate il comando "mkdir".

mkdir /var/www/html/prova

e dentro collochiamo un file per ogni tipologia.

Questo è il file "esempio.scss"

$primary-color: #000000;
$font: 'Arial';

body {
	background: $primary-color;
	font-family: $font;
	p {
		color: #ffffff;
	}
}

Questo è, l'equivalente, "esempio.sass"

$primary-color: #000000
$font: 'Arial'

body 
	background: $primary-color
	font-family: $font
	p 
		color: #ffffff

Con la compilazione, di uno o dell'altro, mi aspetto di ottenere un file chiamato "esempio.css" così strutturato

body {
  background: #000000;
  font-family: 'Arial';
}
body p {
  color: #ffffff;
}

Posizionatevi quindi nella cartella "prova", ad esempio in Linux con il comando "cd" seguito dal path assoluto

cd /var/www/html/prova

e da qui lanciate il comando di compilazione.

Per compilare il file ".scss" utilizzate il seguente comando

sass esempio.scss esempio.css

Controllate nella cartella "prova" e troverete il vostro file css !!

La sintassi per compilare il file ".sass" è analoga

sass esempio.sass esempio.css

Riassumendo, si utilizza un comando, "sass" seguito dal file da compilare e dal nome deil file che vogliamo ottenere.

Se i file sorgenti e/o quello di destinazione si trovassero in path differenti indicare i relativi path e non solo i nomi dei file.

Ad esempio, se avessimo una struttura con due sottodirectory: "src", dove mettiamo i file sorgenti .sass e/o .scss, e "dist" dove verranno generati i css

prova
    - src
        - esempio.scss
    - dist
        - esempio.css

il comando da lanciare sarebbe il seguente

sass src/esempio.scss dist/esempio.css

Ed ancora, se avessimo molti file da compilare nella cartella "src", non dovremmo lanciarne la compilazione ad uno ad uno, bensì è sufficiente indicare le due directory con questa sintassi

sass src:dist

In questo modo tutti i file contenuti in "src" verranno trasformati negli equivalenti file css all'interno della cartella "dist"

Come compliare da riga di comando un file .less

Per compilare i file .less utilizziamo il comando "lessc" seguito dal nome del file sorgente e dal nome del file css da generare

lessc esempio.less esempio.css

Per i file .less non è possibile effettuare la compilazione multipla, indicando semplicemente la cartella sorgente e quella di destinazione.

Tuttavia in Linux possiamo risolvere così:

for f in src/*.less; do lessc $f dist/`basename $f .less`.css ; done

Per ogni file contenuto nella nostra directory "src" e con estensione ".less", eseguiamo il comando "lessc" a cui passiamo il nome del file sorgente, e la destinazione cioè la cartella "dist" seguita dallo stesso nome del file sorgente ma senza esensione (utilizziamo per questo il comando basename) e con l'aggiunta di ".css"

In Windows potete utilizzare la PowerShell e lanciare il seguente comando

Get-ChildItem src/*.less -recurse | Foreach-Object{ lessc $_.FullName > "dist/$($_.BaseName).css" }

Come utilizzare un File Watcher per i file .sass e .scss

Abbiamo detto che un Watcher resta in ascolto sui nostri file e, in caso di modifica, lancia automaticamente la compilazione per generare i relativi file css

Oggi vediamo come lanciare un watcher da linea di comando, mentre per i watcher integrati negli IDE lascio a voi documentarvi.

Con il nostro terminale posizioniamoci sempre nella cartella "prova".

Per quanto riguarda i file .sass e .scss utilizziamo l'opzione --watch

sass --watch esempio.scss esempio.css

A terminale apparirà

Sass is watching for changes. Press Ctrl-C to stop.

Questo significa che il watcher è in esecuzione e, se il file .scss venisse modificato, automaticamente verrà creato il nuovo file css.

E' probabile che abbiate più file da elaborare. In questo caso organizziamo la nostra directory "prova" con le due sottodirectory "src" dove mettiamo i vari file sorgenti da compilare e "dist" dove verranno generati i file css.

Lanciamo il watcher per monitorare tutti i files della cartella "src" con questo comando

sass --watch <input folder>:<output folder>

Nel nostro esempio il comando sarà il seguente

sass --watch src:dist

In questo modo per ogni file contenuto nella cartella "src" verrà creato l'equivalente in formato css, quindi con lo stesso nome ma estensione differente.

Per interrompere il watcher utilizzate la combinazione di tasti CTRL+C. Il terminale non va mai chiuso altrimenti il watcher verrà interrotto.

Come utilizzare un File Watcher per i file .less

Per il file ".less" non esiste una opzione "--watch", bensì occorre installare tramite npm il modulo "less-watch-compiler"

npm install -g less-watch-compiler

Adesso possiamo lanciare il comando "less-watch-compiler" seguito dal path della cartella che contiene i file sorgenti, e dal path della cartella dove verranno generati i file .css

less-watch-compiler src dist

Il terminale risponderà con questa frase

Watching directory for file changes.

e rimarrà in ascolto nella cartella "src". In caso di modifiche ai file in esso contenuti, verranno generati gli equivalenti file css.

Anche in questo caso il terminale non va mai chiuso, e per interrompere l'esecuzione utilizzate CTRL+C.

Considerazioni finali

La scelta tra l'utilizzo di less sass scss è strettamente personale, o legata al progetto che si sta realizzando. As esempio se utilizzate Bootstrap, questo framework utilizza file sorgenti SCSS.

Personalmente prefersico il formato SCSS perchè lo ritengo più semplice e di agevole lettura.

Si rimanda alle documentazioni ufficiali, che indico a fondo articolo, per approfondimenti su tutte le opzioni utilizzabili da linea di comando.