Scrivere i CSS con LESS

24 novembre 2009

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.

Se vuoi aggiornamenti su Scrivere i CSS con LESS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Scrivere i CSS con LESS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy