CSS Less: presentazione e tutorial

Chi programma o progetta siti web moderni non può prescindere dal CSS. Come l’HTML, il linguaggio dei fogli di stile è uno dei linguaggi principali del World Wide Web e permette di separare chiaramente i contenuti del sito web dalla loro rappresentazione grafica. In questo modo entità come layout, colori e font possono essere modificati in qualsiasi momento senza dover stravolgere da cima a fondo l’intero codice sorgente.

Più un progetto web è grande, più i fogli di stile, cioè i documenti in cui vengono registrate le informazioni creative su base CSS, diventano complessi e indecifrabili e con essi anche tutto il lavoro sul linguaggio web. Il preprocessore CSS Less pone rimedio a questa situazione offrendo un modo più semplice di lavorare.

Less (Leaner Style Sheets) è un'estensione retrocompatibile del linguaggio, ovvero un preprocessore del linguaggio dei fogli di stile CSS. Questo significa che qualsiasi codice CSS può essere convertito automaticamente in un codice Less più efficace (ma non viceversa). Lo scopo di Less è quello di rendere più funzionale la scrittura del codice CSS, motivo per cui il linguaggio, influenzato da SASS, offre varie estensioni alle istruzioni CSS standard, come variabili e funzioni che, tra l’altro, consentono una gestione più semplice dei fogli di stile ed evitano laboriose duplicazioni del codice.

Quando Alexis Sellier ha pubblicato il preprocessore CSS nel 2009, il compilatore per la conversione di Less in CSS era ancora scritto nel linguaggio di programmazione Ruby, orientato agli oggetti. Nel frattempo lo strumento JavaScript Less.js è diventato la base per il linguaggio dei fogli di stile e per il processo di compilazione, con il vantaggio che Less può essere compilato non solo lato server ma anche lato client sui browser web.

Sia CSS che Less vengono classificati come linguaggi dei fogli di stile. Entrambi sono linguaggi formali che determinano l'aspetto delle interfacce utente e dei documenti. Al riguardo i file dei fogli di stile con le istruzioni di progettazione richieste devono essere associati esclusivamente a elementi HTML di un sito web; sarà il browser a elaborarli. La differenza sostanziale tra Less e CSS risiede nel fatto che CSS è un linguaggio statico, mentre Less è un linguaggio dinamico e offre elementi dinamici non previsti in CSS come variabili, operatori, funzioni, mixin e annidamenti.

Mentre le istruzioni in CSS devono seguire uno schema fisso, Less offre agli sviluppatori essenzialmente una maggiore flessibilità: ad esempio, per ogni classe di elementi si possono definire regole specifiche che valgono per tutto il foglio di stile, evitando così di dover ripetere laboriosamente il codice. Di conseguenza anche la sintassi dei due linguaggi è diversa. Fondamentalmente la sintassi in Less può essere classificata come metasintassi di CSS, poiché la semantica utilizzata nei due linguaggi è esattamente la stessa.

Se volete usare Less per il vostro progetto, avete due possibilità: potete usare un browser a vostra scelta per compilare i fogli di stile Less con Less.js lato client, oppure installare sul computer l'applicazione JavaScript e convertire il codice utilizzando Less.js e l'ambiente di runtime JavaScript Node.js attraverso la riga di comando.

L'utilizzo lato client di Less è il modo più semplice e veloce per lavorare con il linguaggio dei fogli di stile. Tuttavia, questa variante non è raccomandata per un ambiente live, poiché l'ulteriore conversione da Less a CSS comporterebbe evidenti perdite di prestazione per gli utenti. Nei browser in cui JavaScript è disattivato, le istruzioni di progettazione verrebbero completamente eliminate.

Per compilare Less nel browser, specificare prima nel rispettivo documento che si desidera utilizzare Less Stylesheet (cioè fogli di stile con estensione .less). A tal fine usare l'attributo rel "stylesheet/less":

Infine scaricate la versione aggiornata di Less.js, reperibile ad esempio nella directory ufficiale GitHub del preprocessore CSS. Lo strumento JavaScript può essere dunque incluso nell’area <head> del vostro progetto:

Less può essere installato rapidamente sul computer e utilizzato con facilità. Il sistema operativo è indifferente: il preprocessore CSS funziona con Windows, macOS e UNIX/Linux. Il prerequisito è che sia installato il già citato ambiente di runtime JavaScript Node.js.

Quindi scaricate prima la versione attuale per il vostro sistema dal sito web Node.js e installatela. Con npm, il gestore dei pacchetti dell'ambiente runtime JavaScript, installate il linguaggio dei fogli di stile tramite la seguente riga di comando:

In questo modo potete creare in qualsiasi momento fogli di stile Less, anche tramite la riga di comando. Il file d’esempio example.less può essere convertito in file CSS con il comando seguente:

A tutti coloro che lavorano regolarmente con il CSS conviene saper utilizzare Less non soltanto per il vantaggio di poter incorporare gli elementi dinamici nei codici dei fogli di stile, ma anche per la possibilità di risparmiare tempo ed energia. Naturalmente dovete prima approfondire le peculiarità dell'estensione CSS, perché per poter scrivere fogli di stile in Less è necessario conoscerne le basi sintattiche. In questo breve tutorial vi presenteremo le caratteristiche più importanti, compresa la rispettiva notazione, utilizzando esempi pratici di CSS Less.

Uno dei maggiori punti di forza di Less è la possibilità di creare variabili come in altri linguaggi di programmazione. Queste sono in grado di memorizzare qualsiasi tipo di valore, e questo serve soprattutto per valori particolarmente importanti che ricorrono spesso nel vostro foglio di stile. Ad esempio le variabili sono spesso utilizzate per definire a livello centralizzato colori, font, dimensioni (grandezza, altezza, larghezza), selettori o URL, nonché eventuali variazioni (ad esempio, più chiaro/più scuro, ecc.). I valori definiti vengono quindi applicati a qualsiasi punto del foglio di stile; di conseguenza basta cambiare una singola riga di codice per effettuare modifiche a livello globale.

Nella seguente sezione di codice, ad esempio, sono definite due variabili: una per il colore dello sfondo (@background-color) e l'altra per il colore del testo (@text-color). Entrambe contengono codici esadecimali:

Il colore dello sfondo, in questo caso bianco, è assegnato sia ai normali blocchi di testo (p) che agli elenchi non ordinati (ul). Il nero è definito come colore del testo dei blocchi di testo e degli elementi dell'elenco. Se si desidera apportare modifiche a queste definizioni di colore e, ad esempio, impostare il testo bianco su sfondo nero per gli elenchi e i paragrafi, è sufficiente scambiare i valori delle due variabili. In un foglio CSS tradizionale, invece, i valori dovrebbero essere sostituiti singolarmente per tutti gli elementi. Dopo la compilazione in CSS, il codice si presenta nel modo seguente:

Il principio dei mixin è simile a quello delle variabili. Tuttavia, in questo caso vengono definiti a livello centralizzato non i singoli valori, ma intere classi, compresi i valori in esse dichiarati, in modo che possano essere applicati in qualsiasi momento ad altre classi nel foglio di stile. I mixin possono anche comportarsi come funzioni e accettare parametri (anche con valori predefiniti). Di seguito avete un esempio di mixin per angoli arrotondati (.rounded-corners), assegnato sia all'intestazione (#header) sia al piè di pagina (#footer). Mentre per l'header viene utilizzato un valore predefinito, il #footer attribuisce al mixin un proprio valore (10px):

Il codice CSS compilato per le righe del codice Less si presenta in questo modo:

Per creare una struttura nidificata con il CSS occorre scrivere selettori lunghi e complessi. In Less è sufficiente inserire gerarchicamente tutti i selettori, il che da un lato implica meno sforzo e dall'altro consente di ottenere una struttura del foglio di stile più chiara e trasparente. Nell'esempio che segue viene illustrata questa possibilità del preprocessore CSS:

In questo caso i selettori p, a e :hover sono stati raggruppati nel foglio di stile Less; ciò rappresenta una semplificazione significativa rispetto alla marcatura in un foglio di stile CSS, come potete constatare nell'esempio seguente::

Le operazioni aritmetiche addizione (+), sottrazione (-), moltiplicazione (*) e divisione (/), possono essere utilizzate anche nei fogli di stile Less, applicando il rispettivo operatore a qualsiasi numero e colore. Senza difficoltà si possono costruire relazioni complesse tra i valori di diversi elementi che rimangono tali anche quando i valori di base cambiano. Se la conversione con un operatore è impossibile o non necessaria, questo viene automaticamente ignorato, come quando, per esempio, a un valore in pixel deve essere aggiunto un centimetro. L'esempio seguente mostra le operazioni effettuabili in Less:

Le definizioni di base per i bordi (1px) e il colore di base (#111), il nero, sono quindi applicate all'intestazione e al piè di pagina con tre operatori che manipolano i valori di base:

1. Il colore di base dell’intestazione viene moltiplicato per 3. Il risultato è il valore esadecimale #333, che implica una tonalità grigio scuro.
2. Il bordo destro nell’intestazione ottiene l'operatore della moltiplicazione *2 ed è quindi due volte più largo del bordo standard (2px).
3. Anche il colore di base del piè di pagina viene manipolato da un operatore. Qui il valore esadecimale #003300 viene aggiunto al valore base #111, conferendo al piè di pagina un tono verde scuro (#114411).

Nel codice CSS compilato sono evidenti anche i risultati delle operazioni:

Less è più completo del CSS anche dal punto di vista delle funzioni, poiché offre uno spettro più ampio di possibilità: in un foglio di stile Less è possibile mappare relazioni logiche complesse con la funzione if- o booleana oppure utilizzare funzioni non meno complesse per calcoli matematici come coseno, seno o tangente. Inoltre, sono possibili anche funzioni semplici per una rapida definizione del colore (rgb, rgba, hsv ecc.) o funzioni con operatori del colore come contrasto (contrast), saturazione (saturate o desature) o luminosità (lighten o darken). Per aumentare o diminuire la saturazione di un elemento, ad esempio, è sufficiente la specificazione del colore e la funzione saturate. In percentuale (0-100%) viene specificato anche il livello di saturazione:

In questo esempio, il tono rosso scuro con il codice esadecimale #842210 viene definito nel foglio di stile Less e inserito come colore per l'intestazione e il piè di pagina. Tuttavia, dovrebbe essere applicato un aumento del 20% all'intestazione e una riduzione del 10% nel piè di pagina. Nel foglio di stile CSS le funzioni e la variabile di colore (@red) vengono convertite e quindi si possono vedere solo i codici esadecimali con il rispettivo livello di saturazione:

Questo breve tutorial per principianti ha illustrato solo una minima parte delle possibilità che rendono il preprocessore CSS così prezioso. Una volta definite le variabili, i mixin, ecc., potete applicarle ai nuovi elementi del vostro foglio di stile in qualsiasi momento senza dover ripartire dall’inizio, come con il CSS. Se cambiano valori come la tonalità di base del colore, in pochi semplici passi potrete apportare la modifica a tutto il vostro documento, il che rende il preprocessore CSS un valido aiuto anche per la progettazione a lungo termine di un progetto web.