LESS CSS: la rivoluzione negli stili

LESS velocizza lo sviluppo di progetti Web e trasforma il CSS in un linguaggio dinamico. Vediamo come funziona, quanto è utile e quali sono i suoi punti deboli.

ATTENZIONE! Il contenuto di questo articolo necessita di revisione perché redatto più di un anno fa. I comandi e la sintassi utilizzata potrebbero non funzionare in seguito a cambiamenti o aggiornamenti del software. Scrivici a Questo indirizzo email è protetto dagli spambots. E' necessario abilitare JavaScript per vederlo. se hai bisogno di assistenza.

Articolo pubblicato il 21/02/2012

Less è un linguaggio di programmazione per la compilazione di fogli di stile CSS. Less permette di trasformare la semplice sintassi del CSS in un linguaggio di programmazione pseudo-funzionale offrendo allo sviluppatore ed al designer web strumenti avanzati come funzioni, variabili ed operazioni.

Limiti e difetti del CSS

L'operazione di stilizzazione di una pagina web, specie in progetti di grosse dimensioni, richiede generalmente parecchio tempo: scrivere un foglio di stile CSS è spesso impegnativo e noioso ed il designer web si imbatte in un "paradigma ridondante" pieno di ripetizioni di proprietà e valori.

Molto spesso la complessità e la ridondanza del CSS è causata dalla mancanza di un'analisi ed una progettazione efficaci ed in grado di tamponare i difetti del css: sezionare il layout di una pagina ed ottimizzare il numero di classi e proprietà può ad esempio rendere la scrittura di un css molto più veloce.

Sono però determinanti i limiti intrinsechi del CSS che, avendo una sintassi limitata, affronta la pagina (DOM) e le proprietà grafiche in maniera semplicistica.

L'utilità di Less CSS

LESS porta il linguaggio CSS ad un livello superiore avvicinandolo al paradigma di programmazione funzionale: grazie a LESS è possibile dichiarare variabili, funzioni e fare uso dei Mixins, una speciale funzione che permette di dichiarare una classe contenente una serie di proprietà da poter integrare all'interno di un altro selettore, il quale ne erediterà le proprietà.

Less permette inoltre l'annidamento (nesting) dei selettori semplificando la creazione e la gestione dei selettori discendenti (#header p .link {}) che, seppur sconsigliati, sono spesso usati dai web designer.

Come usare Less CSS

Usare Less css non richiede particolari conoscenze tecniche e, dopo qualche minuto dedicato allo studio delle sue funzionalità, può realmente far risparmiare parecchio tempo durante la stesura dei fogli di stile. Per implementare Less in una pagina web è necessario fare uso del compilatore che si curerà di eseguire il parsing del codice Less restituendo in output un CSS in formato standard.

È possibile compilare Less in due modi diversi: aggiungendo uno script javascript nelle vostre pagine oppure compilando il codice less direttamente nel server, grazie al compilatore per node.js o al compilatore leesphp.

Less lato client (javascript)

Implementare lo script javascript è altamente sconsigliato perché nel caso in cui un utente abbia disabilitato javascript nel proprio browser, vedrà la pagina senza alcuno stile css; inoltre, se il vostro foglio di stile è abbastanza pesante, compilarlo lato client potrebbe rallentare il rendering della pagina intaccando la user experience. Per questo consigliamo, per i progetti in produzione, di compilare less lato server per usufruire dei suoi vantaggi senza rischiare alcun malfunzionamento.

Implementare il compilatore javascript è comunque utile in fase di test e per farlo è sufficiente scaricare la libreria dal sito ufficiale di Less, inserire il link al proprio stile less usando l'attributo rel="sylesheet/less" ed aggiungere lo script alle proprie pagine web così come nell'esempio. Lo script riconosce automaticamente lo stile in formato less e si cura di compilarlo in css.

<link rel="stylesheet/less" type="text/css" href="/styles.less">
<script src="/path/to/less.js"></script>

Ricordate di inserire il foglio di stile prima dello script altrimenti potreste avere problemi durante la sua compilazione.

Less lato server

Compilare gli stili less sul server è sicuramente la scelta obbligatoria per tutti i progetti in produzione. La compilazione lato server permette di sfruttare le potenzialità di Less senza rischi integrando nella pagina HTML un file già compilato in formato css. Delegare al server la compilazione dei file less potrebbe sovraccaricare la CPU, per questo è opportuno compilare staticamente i file o utilizzare una cache per memorizzare i file già compilati. Evitate quindi di compilare i file less ad ogni refresh.

Compilatore per node.js

Installare la libreria less per node.js è semplicissimo e, se usate npm, vi basta digitare npm install less. Il pacchetto per node.js include un eseguibile nella directory /bin che permette di compilare i file in modalità offline dalla riga di comando.
Per la documentazione completa vi rimandiamo alla pagina ufficiale.

Lessphp, compilatore in php

Lessphp è un compilatore less scritto in php. È possibile scaricarlo da qui e si presenta come una classe da includere facilmente negli script già esistenti.

Manuale Less CSS

Come abbiamo già detto, Less offre parecchie funzionalità che estendono il CSS e lo rendono uno strumento più flessibile e funzionale, vediamo insieme le caratteristiche particolari di Less spiegate attraverso semplici esempi di codice.

Variabili

Grazie a Less è possibile dichiarare delle variabili, con dei nomi mnemonici, da poter richiamare in qualsiasi momento e da poter inserire come regole in qualsiasi selettore. Grazie alle variabili è possibile semplificare il CSS dedicando ad esempio una sezione del file alla dichiarazione delle variabili che verranno di volta in volta richiamate nelle regole del foglio di stile. Apportare modifiche alle regole CSS sarà molto più semplice ed immediato.

Vediamo un esempio di utilizzo di variabili in Less. Nel codice in basso sono dichiarate quattro variabili (@blue, @orange, @lightBlack e @mainFont), le prime tre contengono dei colori in esadecimale (hex) mentre l'ultima contiene una famiglia di caratteri:

@blue: #002982;
@orange: #FF7300;
@lightBlack: #111;
@mainFont: 'Arial';
#para{
  font-family: @mainFont;
  color: @orange;
  background-color: @lightBlack;
  border: solid 1px @blue;
}

Dopo aver inserito le variabili nelle regole CSS dell'elemento #para avremo in output un foglio di stile nel quale le variabili verranno sostituite dai valori che contengono:

#para{
  font-family: 'Arial';
  color: #FF7300;
  background-color: #111;
  border: solid 1px #002982;
}

Ricordate che le variabili in Less devono essere attualmente considerate delle costanti in quanto possono essere dichiarate una sola volta e non possono essere sovrascritte. Usando però lessphp per la compilazione dei fogli di stile sembra possibile sovrascriverle con successo senza imbattersi in errori di compilazione (Abbiamo testato lessphp ed abbiamo notato con piacere questa funzione).

I Mixins

I Mixins non sono altro che delle classi che offrono però una maggiore flessibilità: dopo aver dichiarato una classe con delle proprietà è possibile includerla in una regola; tutte le proprietà della classe verranno quindi ereditate dalla regola. Guardate ad esempio il seguente codice nel quale viene dichiarata la classe .borderDot che in seguito viene integrata nel #menu:

@lightBlack: #111;
@mainFont: 'Arial';
.borderDot{
  border: dotted 1px @lightBlack;
}
#menu{
  .borderDot;
}

Dopo aver compilato il codice, il #menu avrà ereditato le proprietà della classe .borderDot ed il foglio di stile apparirà così:

.borderDot {
  border: dotted 1px #111111;
}
#menu{
  border: dotted 1px #111;
}

I mixins non fanno altro che spostare l'assegnazione delle classi dal documento HTML al foglio di stile. Ricordate però di non abusare dei Mixins perché si rischia di veder crescere il peso in kilobyte dei propri fogli di stile. Evitate quindi di utilizzare i Mixins in questo modo:

@lightBlack: #111;
@mainFont: 'Arial';
.borderDot{
  border: dotted 1px @lightBlack;
  font-family: @mainFont;
}
#menu{
  background: #f0f0f0;
  .borderDot;
}
#header{
  background: #a0a0a0;
  .borderDot;
}
#nav{
  background: #c0c0c0;
  .borderDot;
}
#col{
  background: #d0d0d0;
  .borderDot;
}

Perché il foglio di stile risultante avrà questo aspetto:

.borderDot {
  border: dotted 1px #111111;
  font-family: 'Arial';
}
#menu {
  background: #f0f0f0;
  border: dotted 1px #111111;
  font-family: 'Arial';
}
#header {
  background: #a0a0a0;
  border: dotted 1px #111111;
  font-family: 'Arial';
}
#nav {
  background: #c0c0c0;
  border: dotted 1px #111111;
  font-family: 'Arial';
}
#col {
  background: #d0d0d0;
  border: dotted 1px #111111;
  font-family: 'Arial';
}

ed avrà sicuramente un peso in kilobyte superiore ad un tradizionale foglio di stile come il seguente:

.borderDot {
  border: dotted 1px #111111;
  font-family: 'Arial';
}
#menu {
  background: #f0f0f0;
}
#header {
  background: #a0a0a0;
}
#nav {
  background: #c0c0c0;
}
#col {
  background: #d0d0d0;
}

In questo caso l'utilizzo tradizionale del selettore di classi permette di avere dei CSS più leggeri di quelli offerti dall'utilizzo dei Mixins. Ricordatevi sempre che la classe .borderDot può benissimo essere assegnata agli elementi HTML che desiderate utilizzando l'attributo class=.
I Mixins, tranne in rari casi, sono quindi da evitare perchè rischiano di appesantire il vostro CSS.

Funzioni (Mixins parametrici)

Una delle caratteristiche più interessanti di Less è sicuramente quella di poter dichiarare delle funzioni tramite le quali controllare determinate proprietà di un elemento in base ai valori passati come argomento. Nell'esempio seguente vediamo come la funzione .border-radius(@arg) possa aiutare nelle generazione e nel controllo delle tre diverse varianti della proprietà border-radius.

Nel codice in basso viene dichiarata la funzione .border-radius(@arg) che accetta come argomento l'ampiezza del raggio di stondatura:

/* Dichiariamo la funzione .border-radius() */
.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
/* La inseriamo nel selettore #main passando come argomento 4px */
#main {
  .border-radius(4px);
}
/* La inseriamo nel selettore #last passando come argomento 12px */
#last {
  .border-radius(12px);
}

A questo punto gli elementi #main e #last, nei quali è stata inserita la funzione, saranno riempiti con le tre proprietà del css3 per generare angoli stondati:

#main {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
#last {
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
}

Le funzioni in Less sono sicuramente una delle features più utili ma anche per loro vale la regola dei Mixins: non esagerate nell'utilizzo delle funzioni, il CSS offre già la possibilità di aggiungere le stesse proprietà a più elementi contemporaneamente grazie all'utilizzo delle classi, usate quindi le funzioni di LESS solo quando strettamente necessario.

Annidamento delle regole css

Less permette l'annidamento delle regole css semplificando la scrittura di selettori discendenti. Grazie a less è possibile utilizzare uno stile di programmazione molto più elastico e fondato sul concetto di gerarchia degli elementi.
Questo blocco di css:

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
#header .logo:hover {
  text-decoration: none;
}

In less può essere scritto in questo modo:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

Notate come le regole .navigation e .logo siano state scritte all'interno della regola #header, la quale verrà riconosciuta da Less come parent delle regole annidate.

Fate attenzione all'utilizzo dell'operatore & che in less si riferisce al selettore parent .logo piuttosto che al selettore root #header. Tale utilizzo della & risulta comodissimo per la dichiarazione di pseudoclassi come ad esempio :hover e :focus.

Operazioni matematiche

Tutti i numeri, le variabili ed i colori possono diventare termini di operazioni matematiche aiutando il designer web nella gestione della proporzionalità e dell'armonia cromatica degli elementi. Le operazioni seguenti sono tutte correttamente interpretate dal compilatore Less.

@var: 10px;
@varPerc: 20%;
@newVar: @var*3;
@newVarPerc: @varPerc/2;
@color: #B60000;
@newColor: @color+#FF4848;
@foo: (@var*20)+@newVar;

Funzioni integrate in Less

Less, oltre ad offrire le funzionalità già viste, integra una piccola libreria standard che offre funzioni per l'alterazione dei colori ed un paio di funzioni matematiche:

lighten(@color, 10%);       // ritorna un colore il 10% più luminoso
darken(@color, 10%);        // ritorna un colore il 10% più scuro
saturate(@color, 10%);      // ritorna un colore il 10% più saturo
desaturate(@color, 10%);    // ritorna un colore il 10% meno saturo
fadein(@color, 10%);        // ritorna un colore il 10% più opaco
fadeout(@color, 10%);       // ritorna un colore il 10% più trasparente
fade(@color, 50%);          // ritorna un colore con alpha 50%
spin(@color, 10);           // ritorna un colore 10 gradi a destra
spin(@color, -10);          // ritorna un colore 10 gradi a destra
mix(@color1, @color2, 50%); // ritorna un mix di colori al 50%
hue(@color);                // ritorna il valore del canale hue
saturation(@color);         // ritorna il valore del canale saturation
lightness(@color);          // ritorna il valore del canale lightness
alpha(@color);              // ritorna il valore del canale alpha
round(1.67);                // approssima per eccesso, output: 2
ceil(2.4);                  // approssima per eccesso, output: 3 
floor(2.6);                 // approssima per difetto, output: 2
percentage(0.675);          // converte un numero in %, output: 67.5%

Svantaggi e critiche a Less

Less è davvero un progetto interessante e, anche se giovane, offre strumenti e funzionalità molto utili per lo sviluppo di interfacce grafiche web. Pensate ad esempio alla possibilità di utilizzare le variabili o le operazioni matematiche che rendono il css molto più flessibile e rivoluzionano il modo di pensare e progettare i fogli di stile.

Sfortunatamente non tutte le funzioni offerte da Less sono realmente utili ed alcune possono addirittura essere considerate svantaggiose. Sono un esempio i mixins e le funzioni, che rischiano, se utilizzate troppo spesso, di restituire in output fogli di stile più pesanti del necessario inducendo lo sviluppatore a commettere un grosso errore: scordarsi dell'antico uso delle classi.

Altro svantaggio di Less è l'annidamento delle regole che, rendendo più semplice (e immediato) l'utilizzo di selettori discendenti, potrebbe invogliare lo sviluppatore ad abusarne, producendo un effetto catastrofico. I selettori discendenti sono da evitare perché più pesanti da elaborare rispetto ad un selettore di id o di classi.

Usate Less ma ricordatevi di farlo con responsabilità e parsimonia preferendo le funzioni realmente utili come le variabili, le operazioni matematiche e le funzioni integrate piuttosto che quelle spudoratamente inutili.