CSS Less: pre­sen­ta­zio­ne e tutorial

Chi programma o progetta siti web moderni non può pre­scin­de­re dal CSS. Come l’HTML, il lin­guag­gio dei fogli di stile è uno dei linguaggi prin­ci­pa­li del World Wide Web e permette di separare chia­ra­men­te i contenuti del sito web dalla loro rap­pre­sen­ta­zio­ne grafica. In questo modo entità come layout, colori e font possono essere mo­di­fi­ca­ti in qualsiasi momento senza dover stra­vol­ge­re da cima a fondo l’intero codice sorgente.

Più un progetto web è grande, più i fogli di stile, cioè i documenti in cui vengono re­gi­stra­te le in­for­ma­zio­ni creative su base CSS, diventano complessi e in­de­ci­fra­bi­li e con essi anche tutto il lavoro sul lin­guag­gio web. Il pre­pro­ces­so­re CSS Less pone rimedio a questa si­tua­zio­ne offrendo un modo più semplice di lavorare.

Less (Leaner Style Sheets) è un'e­sten­sio­ne re­tro­com­pa­ti­bi­le del lin­guag­gio, ovvero un pre­pro­ces­so­re del lin­guag­gio dei fogli di stile CSS. Questo significa che qualsiasi codice CSS può essere con­ver­ti­to au­to­ma­ti­ca­men­te in un codice Less più efficace (ma non viceversa). Lo scopo di Less è quello di rendere più fun­zio­na­le la scrittura del codice CSS, motivo per cui il lin­guag­gio, in­fluen­za­to da SASS, offre varie esten­sio­ni alle istru­zio­ni CSS standard, come variabili e funzioni che, tra l’altro, con­sen­to­no una gestione più semplice dei fogli di stile ed evitano laboriose du­pli­ca­zio­ni del codice.

Quando Alexis Sellier ha pub­bli­ca­to il pre­pro­ces­so­re CSS nel 2009, il com­pi­la­to­re per la con­ver­sio­ne di Less in CSS era ancora scritto nel lin­guag­gio di pro­gram­ma­zio­ne Ruby, orientato agli oggetti. Nel frattempo lo strumento Ja­va­Script Less.js è diventato la base per il lin­guag­gio dei fogli di stile e per il processo di com­pi­la­zio­ne, con il vantaggio che Less può essere compilato non solo lato server ma anche lato client sui browser web.

Sia CSS che Less vengono clas­si­fi­ca­ti come linguaggi dei fogli di stile. Entrambi sono linguaggi formali che de­ter­mi­na­no l'aspetto delle in­ter­fac­ce utente e dei documenti. Al riguardo i file dei fogli di stile con le istru­zio­ni di pro­get­ta­zio­ne richieste devono essere associati esclu­si­va­men­te a elementi HTML di un sito web; sarà il browser a ela­bo­rar­li. La dif­fe­ren­za so­stan­zia­le tra Less e CSS risiede nel fatto che CSS è un lin­guag­gio statico, mentre Less è un lin­guag­gio dinamico e offre elementi dinamici non previsti in CSS come variabili, operatori, funzioni, mixin e an­ni­da­men­ti.

Mentre le istru­zio­ni in CSS devono seguire uno schema fisso, Less offre agli svi­lup­pa­to­ri es­sen­zial­men­te una maggiore fles­si­bi­li­tà: ad esempio, per ogni classe di elementi si possono definire regole spe­ci­fi­che che valgono per tutto il foglio di stile, evitando così di dover ripetere la­bo­rio­sa­men­te il codice. Di con­se­guen­za anche la sintassi dei due linguaggi è diversa. Fon­da­men­tal­men­te la sintassi in Less può essere clas­si­fi­ca­ta come me­ta­sin­tas­si di CSS, poiché la semantica uti­liz­za­ta nei due linguaggi è esat­ta­men­te la stessa.

Se volete usare Less per il vostro progetto, avete due pos­si­bi­li­tà: potete usare un browser a vostra scelta per compilare i fogli di stile Less con Less.js lato client, oppure in­stal­la­re sul computer l'ap­pli­ca­zio­ne Ja­va­Script e con­ver­ti­re il codice uti­liz­zan­do Less.js e l'am­bien­te di runtime Ja­va­Script Node.js at­tra­ver­so la riga di comando.

L'u­ti­liz­zo lato client di Less è il modo più semplice e veloce per lavorare con il lin­guag­gio dei fogli di stile. Tuttavia, questa variante non è rac­co­man­da­ta per un ambiente live, poiché l'ul­te­rio­re con­ver­sio­ne da Less a CSS com­por­te­reb­be evidenti perdite di pre­sta­zio­ne per gli utenti. Nei browser in cui Ja­va­Script è di­sat­ti­va­to, le istru­zio­ni di pro­get­ta­zio­ne ver­reb­be­ro com­ple­ta­men­te eliminate.

Per compilare Less nel browser, spe­ci­fi­ca­re prima nel ri­spet­ti­vo documento che si desidera uti­liz­za­re Less Sty­le­sheet (cioè fogli di stile con esten­sio­ne .less). A tal fine usare l'at­tri­bu­to rel "sty­le­sheet/less":

Infine scaricate la versione ag­gior­na­ta di Less.js, re­pe­ri­bi­le ad esempio nella directory ufficiale GitHub del pre­pro­ces­so­re CSS. Lo strumento Ja­va­Script può essere dunque incluso nell’area <head> del vostro progetto:

Less può essere in­stal­la­to ra­pi­da­men­te sul computer e uti­liz­za­to con facilità. Il sistema operativo è in­dif­fe­ren­te: il pre­pro­ces­so­re CSS funziona con Windows, macOS e UNIX/Linux. Il pre­re­qui­si­to è che sia in­stal­la­to il già citato ambiente di runtime Ja­va­Script Node.js.

Quindi scaricate prima la versione attuale per il vostro sistema dal sito web Node.js e in­stal­la­te­la. Con npm, il gestore dei pacchetti del­l'am­bien­te runtime Ja­va­Script, in­stal­la­te il lin­guag­gio 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 con­ver­ti­to in file CSS con il comando seguente:

A tutti coloro che lavorano re­go­lar­men­te con il CSS conviene saper uti­liz­za­re Less non soltanto per il vantaggio di poter in­cor­po­ra­re gli elementi dinamici nei codici dei fogli di stile, ma anche per la pos­si­bi­li­tà di ri­spar­mia­re tempo ed energia. Na­tu­ral­men­te dovete prima ap­pro­fon­di­re le pe­cu­lia­ri­tà del­l'e­sten­sio­ne CSS, perché per poter scrivere fogli di stile in Less è ne­ces­sa­rio co­no­scer­ne le basi sin­tat­ti­che. In questo breve tutorial vi pre­sen­te­re­mo le ca­rat­te­ri­sti­che più im­por­tan­ti, compresa la ri­spet­ti­va notazione, uti­liz­zan­do esempi pratici di CSS Less.

Uno dei maggiori punti di forza di Less è la pos­si­bi­li­tà di creare variabili come in altri linguaggi di pro­gram­ma­zio­ne. Queste sono in grado di me­mo­riz­za­re qualsiasi tipo di valore, e questo serve so­prat­tut­to per valori par­ti­co­lar­men­te im­por­tan­ti che ricorrono spesso nel vostro foglio di stile. Ad esempio le variabili sono spesso uti­liz­za­te per definire a livello cen­tra­liz­za­to colori, font, di­men­sio­ni (grandezza, altezza, larghezza), selettori o URL, nonché eventuali va­ria­zio­ni (ad esempio, più chiaro/più scuro, ecc.). I valori definiti vengono quindi applicati a qualsiasi punto del foglio di stile; di con­se­guen­za basta cambiare una singola riga di codice per ef­fet­tua­re modifiche a livello globale.

Nella seguente sezione di codice, ad esempio, sono definite due variabili: una per il colore dello sfondo (@back­ground-color) e l'altra per il colore del testo (@text-color). Entrambe con­ten­go­no codici esa­de­ci­ma­li:

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 del­l'e­len­co. Se si desidera apportare modifiche a queste de­fi­ni­zio­ni di colore e, ad esempio, impostare il testo bianco su sfondo nero per gli elenchi e i paragrafi, è suf­fi­cien­te scambiare i valori delle due variabili. In un foglio CSS tra­di­zio­na­le, invece, i valori do­vreb­be­ro essere so­sti­tui­ti sin­go­lar­men­te per tutti gli elementi. Dopo la com­pi­la­zio­ne 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 cen­tra­liz­za­to non i singoli valori, ma intere classi, compresi i valori in esse di­chia­ra­ti, in modo che possano essere applicati in qualsiasi momento ad altre classi nel foglio di stile. I mixin possono anche com­por­tar­si come funzioni e accettare parametri (anche con valori pre­de­fi­ni­ti). Di seguito avete un esempio di mixin per angoli ar­ro­ton­da­ti (.rounded-corners), assegnato sia al­l'in­te­sta­zio­ne (#header) sia al piè di pagina (#footer). Mentre per l'header viene uti­liz­za­to un valore pre­de­fi­ni­to, il #footer at­tri­bui­sce 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 ni­di­fi­ca­ta con il CSS occorre scrivere selettori lunghi e complessi. In Less è suf­fi­cien­te inserire ge­rar­chi­ca­men­te tutti i selettori, il che da un lato implica meno sforzo e dal­l'al­tro consente di ottenere una struttura del foglio di stile più chiara e tra­spa­ren­te. Nel­l'e­sem­pio che segue viene il­lu­stra­ta questa pos­si­bi­li­tà del pre­pro­ces­so­re CSS:

In questo caso i selettori p, a e :hover sono stati rag­grup­pa­ti nel foglio di stile Less; ciò rap­pre­sen­ta una sem­pli­fi­ca­zio­ne si­gni­fi­ca­ti­va rispetto alla marcatura in un foglio di stile CSS, come potete con­sta­ta­re nel­l'e­sem­pio seguente::

Le ope­ra­zio­ni arit­me­ti­che addizione (+), sot­tra­zio­ne (-), mol­ti­pli­ca­zio­ne (*) e divisione (/), possono essere uti­liz­za­te anche nei fogli di stile Less, ap­pli­can­do il ri­spet­ti­vo operatore a qualsiasi numero e colore. Senza dif­fi­col­tà si possono costruire relazioni complesse tra i valori di diversi elementi che rimangono tali anche quando i valori di base cambiano. Se la con­ver­sio­ne con un operatore è im­pos­si­bi­le o non ne­ces­sa­ria, questo viene au­to­ma­ti­ca­men­te ignorato, come quando, per esempio, a un valore in pixel deve essere aggiunto un cen­ti­me­tro. L'esempio seguente mostra le ope­ra­zio­ni ef­fet­tua­bi­li in Less:

Le de­fi­ni­zio­ni di base per i bordi (1px) e il colore di base (#111), il nero, sono quindi applicate all'in­te­sta­zio­ne e al piè di pagina con tre operatori che ma­ni­po­la­no i valori di base:

1. Il colore di base dell’in­te­sta­zio­ne viene mol­ti­pli­ca­to per 3. Il risultato è il valore esa­de­ci­ma­le #333, che implica una tonalità grigio scuro.
2. Il bordo destro nell’in­te­sta­zio­ne ottiene l'o­pe­ra­to­re della mol­ti­pli­ca­zio­ne *2 ed è quindi due volte più largo del bordo standard (2px).
3. Anche il colore di base del piè di pagina viene ma­ni­po­la­to da un operatore. Qui il valore esa­de­ci­ma­le #003300 viene aggiunto al valore base #111, con­fe­ren­do al piè di pagina un tono verde scuro (#114411).

Nel codice CSS compilato sono evidenti anche i risultati delle ope­ra­zio­ni:

Less è più completo del CSS anche dal punto di vista delle funzioni, poiché offre uno spettro più ampio di pos­si­bi­li­tà: in un foglio di stile Less è possibile mappare relazioni logiche complesse con la funzione if- o booleana oppure uti­liz­za­re funzioni non meno complesse per calcoli ma­te­ma­ti­ci come coseno, seno o tangente. Inoltre, sono possibili anche funzioni semplici per una rapida de­fi­ni­zio­ne del colore (rgb, rgba, hsv ecc.) o funzioni con operatori del colore come contrasto (contrast), sa­tu­ra­zio­ne (saturate o desature) o lu­mi­no­si­tà (lighten o darken). Per aumentare o diminuire la sa­tu­ra­zio­ne di un elemento, ad esempio, è suf­fi­cien­te la spe­ci­fi­ca­zio­ne del colore e la funzione saturate. In per­cen­tua­le (0-100%) viene spe­ci­fi­ca­to anche il livello di sa­tu­ra­zio­ne:

In questo esempio, il tono rosso scuro con il codice esa­de­ci­ma­le #842210 viene definito nel foglio di stile Less e inserito come colore per l'in­te­sta­zio­ne e il piè di pagina. Tuttavia, dovrebbe essere applicato un aumento del 20% al­l'in­te­sta­zio­ne e una riduzione del 10% nel piè di pagina. Nel foglio di stile CSS le funzioni e la variabile di colore (@red) vengono con­ver­ti­te e quindi si possono vedere solo i codici esa­de­ci­ma­li con il ri­spet­ti­vo livello di sa­tu­ra­zio­ne:

Questo breve tutorial per prin­ci­pian­ti ha il­lu­stra­to solo una minima parte delle pos­si­bi­li­tà che rendono il pre­pro­ces­so­re CSS così prezioso. Una volta definite le variabili, i mixin, ecc., potete ap­pli­car­le 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 pre­pro­ces­so­re CSS un valido aiuto anche per la pro­get­ta­zio­ne a lungo termine di un progetto web.