Scrivere i CSS con Less

LESS CSS è una libreria che ci permette realizzare fogli di stile utilizzando una sintassi più simile a quella dei linguaggi di programmazione, offerendo non pochi vantaggi specie sul piano della manutenibilità del codice.

Andiamo subito al sodo

#box {
    width: 50px;
    height: 50px;
    background-color:#eeeeee;
}
#box h1 {
    font-size:20px;
    background-color:#bbbbbb;
}
#box p {
    font-size:13px;
}
#box p .data {
    font-size:11px;
    font-weight:bold;
}

@dimensione:50px;
@base:#eeeeee;
#box {
    width: @dimensione;
    height: @dimensione;
    background-color:@base;
    h1 {
        font-size:20px;
        background-color:@base - #333333;
    }
    p {
        font-size:13px;
        .data {
            font-size:11px;
            font-weight:bold;
        }
    }
}

Vi state forse chiedendo cosa sia quel codice contenuto nel secondo box? Si tratta di Less, un nuovo approccio alla scrittura dei CSS secondo una modalità più logica e produttiva. Se la novità vi ha incuriosito, continuate a leggere: non ne rimarrete delusi.

I limiti dei CSS

Da quando è stato introdotto il supporto ai CSS nei browser, lo sviluppo di layout grafici e di interfacce complesse ha subito una decisa evoluzione, tanto che oggi, sbirciando nel sorgente dei nostri siti preferiti, diventa sempre più facile osservare pagine con markup HTML ben formattato e totalmente semantico delegando ai fogli di stile il compito di formattarne il contenuto.

Negli anni tante cose sono cambiate: si sono fatti strada nuovi standard e il supporto da parte dei browser è notevolmente migliorato (beh, almeno per alcuni...).

Ciò che non è quasi per nulla variato è il modo con cui i CSS vengono scritti. I fogli di stile sono dei semplici documenti testuali, si tratta di un linguaggio statico, descrittivo e non compilato, privo di qualsiasi tipo di logica di programmazione o dinamicità.

Facciamo un esempio pratico per capire cosa intendiamo per linguaggio "statico".

In un qualsiasi linguaggio di programmazione è possibile dichiarare delle variabili. Le variabili sono dei contenitori in cui si può memorizzare un dato che è poi possibile riutilizzare in più parti del nostro codice.

Facciamo un semplice esempio con javascript:

<script>
    var $colore = "rosso";
    /* ... istruzioni varie ... */
    alert($colore);
</script>

Abbiamo preso una stringa "rosso" e l'abbiamo memorizzata nella variabile $colore.

All'interno del nostro codice, non ci rimane altro da fare che richiamare la variabile $colore ogni volta che desideriamo utilizzare la stringa dichiarata in precedenza.

Si tratta di un esempio molto banale che mostra una delle funzionalità base di un qualsiasi linguaggio di programmazione. Ma nonostante la sua banalità, risulta essere una caratteristica totalmente assente nei CSS a dimostrazione di quanto questi siano poco flessibili in tal senso.

A quanti di voi è capitato di copiare e duplicare lunghe porzioni di codice nei vostri CSS? E quante volte vi è stato necessario scrivere lunghi selettori per identificare correttamente un elemento nel markup della pagina?

È proprio in queste situazioni che nuove soluzioni come Less e Sass (probabilmente oggetto di un futuro articolo) vengono in aiuto aggiungendo un livello di astrazione al linguaggio CSS base, rendendo la scrittura del codice più elegante e, dal mio personale punto di vista, più divertente.

Come superare i limiti con Less

Less permette quindi di aggiungere un po' di pepe ai nostri fogli di stile supportando quattro funzionalità specifiche: le variabili, i mixins, alcune operazioni matematiche e le dichiarazioni nidificate.

Una delle caratteristiche più interessanti di Less è che per ottenere questi benefici non è necessario imparare un nuovo linguaggio di programmazione o adottare una sintassi differente.

Less si basa infatti sulla normale sintassi CSS che tutti già conosciamo. Tutte le dichiarazioni delle proprietà restano quindi immutate tant'è che è possibile prendere un normale file .css, rinominarlo in .less e incominciare a lavorarci direttamente.

Le funzionalità aggiuntive messe a disposizione da Less vengono interpretate in parte grazie a poche dichiarazioni specifiche e in parte scrivendo il proprio codice in modo più strutturato, logico ed elegante.

Ciò implica anche che un file Less non può essere direttamente interpretato dai browser ma deve essere pre-processato per poter ottenere il file .css finale. A tale scopo esiste un compilatore specifico a riga di comando che permette di trasformare un file .less in un classico file .css.

Non preoccupatevi, non è necessario lanciare il compilatore tutte le volte che eseguite una modifica al file .less. Esiste infatti una opzione per eseguirlo in modalità interattiva: ogni volta che il compilatore rileverà una modifica nel file .less, verrà automaticamente rigenerato un nuovo file .css.

Less si installa molto facilmente grazie ad una piccola gemma di Ruby. Se questi due termini vi suonano strani, vi consiglio di dare una veloce lettura alle guide di HTML.it dedicate a Ruby e Rails.
Sappiate comunque che non è assolutamente necessario padroneggiare questi due linguaggi per utilizzare Less.

Se la vostra piattaforma di sviluppo si basa su una versione recente di Mac OS X, per installare Less è sufficente digitare:

sudo gem install less

Nel caso l'istruzione non venga riconosciuta o per chi lavora su Windows o Linux, è necessario provvedere prima all'installazione di Ruby e ruby-gem. Per le istruzioni dettagliate su come procedere potete fare ancora un volta riferimento alle guide presenti qui su HTML.it.

Personalmente vi consiglio di installare l'ultima versione in sviluppo così da aver accesso alle ultime funzionalità introdotte.

L'installazione in questo caso può essere eseguita in questo modo:

sudo gem install less -s http://gemcutter.org

Ora, posto che abbiate creato un file layout.less, per generare il vostro file .css è sufficiente digitare il comando:

lessc layout.less

Troverete ora un file layout.css nella medesima cartella in cui si trova layout.less.

Come accennato in precedenza, esiste la possibilità di lanciare il compilatore in modalità interattiva in questo modo:

lessc -w layout.less

e al terminal (o prompt dei comandi) apparirà un messaggio simile al seguente:

* Watching for changes in layout.less... Ctrl-C to abort.
: Change detected... * [Updated] layout.css
:

Da questo momento in poi Less si occuperà di generare un nuovo file .css aggiornato ogni qual volta verrà rilevato un cambiamento nel file .less.

Nota bene: ogni volta che il compilatore rileva un errore nel codice sorgente, arresta automaticamente la modalità interattiva. È quindi necessario ricordarsi di ritornare al prompt dove è in esecuzione e riattivarla.

Il linguaggio

Possiamo ora passare ad analizzare in dettaglio le funzionalità messe a disposizione da Less.

Variabili

Tramite l'utilizzo di variabili è possibile dichiarare il valore di una proprietà per poi utilizzarla più volte all'interno del nostro file:

@colore-testo: #333333;
p {
  color: @colore-testo;
}
a {
  color: @colore-testo;
  text-decoration: underline;
}

Verrà quindi generato il seguente CSS, ma in fase di scrittura avremo sfruttato tutte le potenzialità offerte dalle variabili! Pensate il concetto applicato a fogli di stile lunghi e complessi:

p {
  color: #333333;
}
a {
  color: #333333;
  text-decoration: underline;
}

I mixins permettono di definire una serie di proprietà che possono essere richiamate all'interno delle dichiarazioni degli stili. È anche possibile definire dei parametri che possono essere passati ai mixins per variarne i valori interni.

Uno dei primi esempi pratici potrebbe essere la definizione di bordi arrotondati:

.rounded ( @raggio: 3px ) {
border-radius: @raggio;
-moz-border-radius: @raggio;
-webkit-border-radius: @raggio;
-khtml-border-radius: @raggio;
}
#box-login {
.rounded;
}
#box-register {
.rounded(5px);
}

Nella prima parte abbiamo dichiarato un mixin .rounded in grado di accettare un parametro il cui valore di default è pari a 3 pixel. In seguito abbiamo riutilizzato il mixin all'interno di due selettori differenti: il primo utilizzerà i valori di default, mentre per il secondo è stato specificato un valore alternativo.

Il codice generato sarà il seguente:

#box-login {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
}
#box-register {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
}

Nota bene: non è strettamente necessario dichiarare un mixin utilizzando la notazione con parentesi! Eliminando le parentesi, il mixin verrà considerato come una normale dichiarazione di una classe CSS e quindi inclusa nel CSS generato dal compilatore.

Dichiarazioni nidificate

Less permette di velocizzare la scrittura di lunghe sequenze di selettori nidificando e raggruppando i percorsi attraverso l'uso delle parentesi:

#content {
  width: 960px;
  margin: 0 auto;
  p {
    font-size: 13px;
    .date {
      font-size: 10px;
    }
  }
  ul {
    margin: 10px 0;
  }
}

Ecco come si presenta il codice dopo essere stato compilato:

#content {
  width: 960px;
  margin: 0 auto;
}
#content p {
  font-size: 13px;
}
#content p .date {
  font-size: 10px;
}
#content ul {
  margin: 10px 0;
}

Operazioni

Sono supportate le più comuni operazioni di base. Il compilatore è in grado di riconoscere il tipo di valore che si sta manipolando e quindi applicare la corretta unità di misura. Questa caratteristica risulta particolarmente utile, ad esempio, quando si desidera ottenere diversi gradienti di colore partendo da un valore di base. O ancora, per il calcolo della larghezza delle colonne di un template a griglia.

@total_width: 960px;
@base_color: #eeeeee;
#container {
  width: @total_width;
  overflow: hidden;
  .column {
    width: @total_width / 12;
    float:left;
    background-color: @base_color;
  }
  .odd {
    background-color: @base_color - #333333;
  }
}

Il codice generato in questo caso sarà:

#container {
  width: 960px;
  overflow: hidden;
}
#container .column {
    width: 80px;
    float:left;
    background-color: #eeeeee;
}
#container .odd {
    background-color: #bbbbbb;
}

Namespaces e Accessors

È possibile raggruppare una serie di mixins o variabili all'interno di una singola dichiarazione, ad esempio per raccogliere alcune definizioni di base in un unico oggetto.

#defaults {
  @blue: #003366;
  @red: #990000;
  .text {
    font-size:14px;
    color:#333333;
    line-height:1.5;
  }
  .button {
    font-size:12px;
    border:1px #000000 solid;
  }
}

Ecco quindi come accedere alle proprietà appena definite:

p {
  color:#defaults[@blue];
  #defaults > .text;
}

Infine è anche possibile accedere a proprietà dichiarate in altre classi:

.text {
  color:#333333;
}
a {
  color: .text['color'];
}

Scope

Quando richiamiamo una variabile, il compilatore ricerca il suo valore in primis a livello locale e, nel caso non fosse disponibile, a ritroso percorrendo i vari nodi padre.

@textColor:#ffffff;
p {
  @textColor:#000000;
  a {
  	color:@textColor;
  }
}

In questo caso il colore del link sarà: #000000.

Import

Less permette di importare sia altri file .less che normali file .css tramite l'istruzione @import. Per i file .less non è necessario specificare l'estensione.

@import "reset.css";
@import "typography";

Approfondimento: l'uso in abbinamento con i framework CSS

Abbiamo visto come Less permetta di estendere e potenziare la scrittura di codice css. Una delle possibilità che ritengo più interessanti è il suo utilizzo al fianco di framework CSS quali Blueprint o 960gs al fine di ottenere un markup più semantico.

Uno degli svantaggi dell'utilizzo di questi framework è dover utilizzare classi i cui nomi definiscono il numero e l'ordine delle colonne che formano il layout. È buona norma, invece, utilizzare definizioni che abbiano un significato allineato con il contenuto o la parte del layout su cui vengono applicati.

Facciamo un semplice esempio utilizzando 960gs. Sulla homepage del progetto è riportato un semplice markup di esempio:

<div class="container_12">
  <div class="grid_7 prefix_1">
    <div class="grid_2 alpha">
      ...
    </div>
    <div class="grid_3">
      ...
    </div>
    <div class="grid_2 omega">
      ...
    </div>
  </div>
  <div class="grid_3 suffix_1">
    ...
  </div>
</div>

Sfruttando le potenzialità di Less potremmo riscrivere l'esempio riportato in questo modo:

<div id="page">
  <div id="content">
    <div class="avatar">
      ...
    </div>
    <div class="text">
      ...
    </div>
    <div class="date">
      ...
    </div>
  </div>
  <div id="side">
    ...
  </div>
</div>

e lasciare a Less il compito di applicare le proprietà definite all'interno del framework 960gs:

@import 960.css
#page {
  .container_12;
}
#content {
  .grid_7;
  .prefix_1;
  .avatar {
    .grid_2;
    .alpha;
  }
  .text {
    .grid_3;
  }
  .date {
    .grid_2;
    .omega;
  }
}
#side {
  .grid_3;
  .suffix_1;
}

Conclusioni

In questo articolo abbiamo dato una prima occhiata a come velocizzare e migliorare la scrittura di codice CSS grazie all'utilizzo di Less. Vi ricordo che potete trovare ulteriori informazioni sia sul sito ufficiale, sia sulle pagine di github che ospitano i file del progetto.

Come detto in apertura esistono anche altre alternative (una su tutte: Sass) a volte anche più ricche di funzionalità. La peculiarità di Less sta nell'approccio con cui cerca di introdurre queste features. Less infatti sfrutta la normale sintassi CSS riducendo da un lato la curva di apprendimento, dall'altra semplificando l'integrazione con codice CSS già esistente.

Non si tratta certo di una rivoluzione ma grazie a questi tool è finalmente possibile scrivere fogli di stile in modo più veloce, piacevole ed efficiente.