Questo articolo è per tutti quei Web Designer che hanno sempre sentito parlare di acronimi come LESS, SASS (o SCSS) ma non hanno capito bene a cosa servono.
SASS e LESS sono 2 preprocessori CSS e permettono di estendere delle funzionalità interessanti nella scrittura del normale codice CSS, aggiungendo alcune features che normalmente sarebbero esclusive dei linguaggi di programmazione. Lo scopo è quello di velocizzare la scrittura di codice e migliorare il suo mantenimento.
I browser attuali leggono solo ed esclusivamente codice CSS, quindi i linguaggi come SASS e LESS devono essere convertiti sempre in codice CSS. Da qui il termine di preprocessori.
Quali sono i vantaggi dei preprocessori CSS?
LESS e SASS, come anticipato dal titolo, aggiungono i “superpoteri” al codice CSS (riprendendo il motto della pagina ufficiale di LESS). In pratica permettono di avere queste principali features:
- Le variabili: Avete un colore che ripetete in più parti del codice? allora potete creare una variabile e richiamare quella. Così, se in futuro aveste bisogno di modificare quel colore non lo dovrete fare mille volte, ma vi basterà modificare il valore della variabile.
- Regole innestate: Invece di scrivere lunghissimi selettori discendenti, ora potete inserire una regola dentro l’altra. Il preprocessore autonomamente capirà che quella è una discendente della regola in cui è contenuta.
- Import: Sapete che di norma è meglio avere un unico foglio di stile, ma nei progetti grossi poter frammentare il codice in più file migliora l’organizzazione. Possiamo creare quindi più file e dire al preprocessore di unirli quando andrà a creare il file CSS.
- Mixins: Possiamo creare gruppi di dichiarazioni così da velocizzare la scrittura di più proprietà. Ad esempio quando dobbiamo lavorare con le proprietà CSS3 che richiedono l’inserimento anche dei prefissi proprietari (-webkit-, -moz, ecc.)
- Operatori: Essendo una specie di linguaggio di programmazione, LESS e SASS permettono di usare gli operatori matematici sui valori (+, -, *, /, %) così da far eseguire i calcoli direttamente alla macchina.
Ovviamente ci sono altri vantaggi, ma diciamo che questi sono i principali e i più interessanti.
Meglio SASS o LESS?
Questi 2 linguaggio sono competitor a tutti gli effetti. In linea di massima fanno le stesse cose. Sì, ci sono delle differenze in termini di prestazioni e di particolari caratteristiche, ma niente che faccia propendere pesantemente per uno o l’altro.
Io stesso ho iniziato usando LESS per poi passare a SASS. Il motivo? Semplicemente lavoro spesso con Bootstrap e dalla versione 3 alla 4 hanno deciso di passare da un preprocessore di tipo LESS a SASS. Quindi per rimanere sulla stessa lunghezza d’onda ho cambiato anche io.
Non spaventatevi: i 2 linguaggi sono praticamente uguali e cambiano solo in pochi aspetti sintattici. Quindi passare da uno a l’altro non vi porta via troppo tempo.
Occhio solo ad una cosa: SASS permette di usare 2 tipi di sintassi: .sass o .scss. Io consiglio quest’ultima che è retrocompatibile con il CSS (cioè qualsiasi linguaggio CSS può essere anche considerato SCSS). Lo stesso non vale invece per .sass che usa una sintassi particolare (senza parentesi graffe).
Come si usano i preprocessori CSS?
Come abbiamo visto, per poter usare i preprocessori CSS è necessario che ci sia un sistema che mi traduca il codice SASS/LESS in comune CSS. Esistono ovviamente dei programmi che si occupano di far questo, ma viste le continue modifiche che si eseguono al foglio di stile, è impensabile prevedere un’operazione manuale.
Per questo motivo esistono i File Watcher: i vari IDE (PhpStorm, Visual Studio Code, Atom, Sublime, ecc.) Hanno la possibilità di configurare questi elementi che si occupano di rimanere “in ascolto” delle modifiche dei file LESS/SASS. Ad ogni salvataggio di questi file, il sistema di occupa di creare subito una versione CSS, sovrascrivendo la precedente.
Così facendo, voi continuerete a scrivere sempre in LESS/SASS e nell’HTML del vostro progetto richiamerete il file CSS che sarà generato in automatico dal File Watcher. Comodo no?
Come installare SASS o LESS
SASS e LESS non sono dei linguaggi nativi. Quindi è necessario installarli sul nostro computer prima di poterli usare. Per far questo dobbiamo prima di tutto installare node.js, un framework che permette di scrivere applicazioni lato server usando il codice JavaScript, attraverso il motore di V8, sviluppato da Google.
Andate quindi al sito ufficiale (https://nodejs.org/en/), scaricate e installate la versione raccomandata (LTS).
Una volta installato, potrete usare sul terminale il comando “npm” (node package manager) proprio di node.js.
Su sistemi Mac, faremo uso dell’applicazione nativa “Terminale”, mentre per sistemi Windows, useremo il prompt dei comandi (installando node.js vedremo comparire proprio “node.js command prompt”). Per verificare la corretta installazione vi basta scrivere “node –version” sul terminale, come potete vedere qui sotto.
Ecco, ora che abbiamo il necessario possiamo passare ad installare Sass e Less. Per farlo, aprite il terminale/prompt dei comandi (a seconda del sistema operativo) e digitate il seguente comando, seguito da invio, per installare rispettivamente Sass e Less
Sass e SCSS:
sudo npm install -g sass
Less:
sudo npm install -g less
Una volta installati, potrete compilare ogni file .less, .sass e .scss richiamando i rispettivi comandi tramite terminale, oppure affidandovi ai File Watcher dei vostri rispettivi IDE.
Come configurare il file Watcher di PhpStorm
Per comodità prendiamo in esame solamente l’IDE PhpStorm. La procedura risulta però simile anche per gli altri IDE. Alcuni hanno già integrato il sistema (ad esempio Visual Studio Code), altri come Atom e Sublime richiedono l’integrazione di plugin specifici.
Aprite il programma PhpStorm e raggiungete le preferenze. Da qui andate, tramite menu laterale, sulla voce Tools –> File Watchers. Premete poi sul “+” presente in basso a sinistra della schermata che compare, e selezionate il compilatore che volete gestire (Less, Sass o SCSS).
Sulla schermata di configurazione, lasciate tutto così com’è. Assicuratevi solo che su “Program:” sia presente questo valore:
- lessc (per il compilatore Less)
- sass (per il compilatore Sass)
- sass (per il compilatore SCSS)
E cliccate su “Ok”. Ora il vostro Progetto avrà un Watcher che si occuperà in automatico di trasformare i file precompilati in codice CSS. Non vi resta che creare un file sass/less/scss e provare a scrivere del codice. Appena salverete il file, vedrete comparire sulla stessa cartella un’omonima versione CSS.
Vi lascio anche il link alla guida ufficiale: Guida PhpStorm
N.B.: Il File Watcher è legato al progetto, quindi l’aggiunta va fatta per ogni Progetto. C’è da dire però che quando si crea un file Less/Sass/SCSS, in automatico, comparirà un banner in alto che vi chiede se volete abilitare il File Watcher, con tanto di link che rimanda all’apposita sezione.
Ora non vi resta che approfondire questi linguaggi, andando sui rispettivi siti ufficiali che trovate qui sotto. Quindi, buono studio!
Less: http://lesscss.org/
Sass/SCSS: https://sass-lang.com/
Ancora nessun commento