Home page di LESS

CSS più intelligenti con LESS

Published 7 years ago · 5 mins read

5 mins read

I CSS sono uno strumento potentissimo nelle mani di un web designer. Permettono di definire in modo completo il look&feel di un sito o di un’applicazione web, senza richiedere doti trascendentali di programmazione. Con i fogli di stile, è stato possibile trasportare il web su un nuovo livello, separando per la prima volta semantica e contenuto (delegati all’HTML) dalla presentazione grafica (gestita dai CSS).

LESS logoTuttavia, a volte il linguaggio CSS può sembrare un po’ limitato e, se non si presta abbastanza attenzione, è facile ritrovarsi con fogli di stile inzuppati di codice incomprensibile e poco gestibile. Questo problema, oltre che con un’accurata progettazione del codice, può essere affrontato con lo strumento che andrò a presentare in questo articolo: LESS.

Che cos’è?

LESS, al contrario di come può suggerire il nome, è un’estensione del codice CSS, che introduce alcune funzionalità che possono semplificare notevolmente la vita dello sviluppatore web. Il codice proprietario LESS può essere mixato a piacere con CSS standard all’interno di un foglio di stile. L’unica differenza è che il file prende l’estensione .less e deve poi essere compilato in puro CSS prima di essere utilizzato (vedremo dopo come, è molto semplice!)

Cosa introduce LESS in più rispetto ai CSS? Principalmente quattro cose: le Variabili, i Mixins, le Regole annidate e le Operazioni. Vediamo di cosa si tratta in dettaglio.

1. Variabili

Grazie alle variabili, possiamo definire in un’unica riga di codice dei valori che vengono poi usati in diversi punti del foglio di stile. Le variabili sono sempre precedute dal carattere @. Vediamo un esempio:

@brandcolor: #F39923;
....
h1, h2, #header{
      color: @brandcolor;
}
#footer{
      background: @brandcolor;
}

Qual’è l’utilità delle variabili? Permettono di mantenere il codice più pulito e facile da modificare. Supponiamo che il colore del brand aziendale venga modificato da un giorno all’altro. Cosa dovremmo fare con CSS standard? Andare a cercare il valore in ogni punto in cui è stato usato e modificarlo. Con LESS sarà sufficiente modificare la dichiarazione @brandcolor e il gioco è fatto.

2. Mixins

I mixins (contrazione di “mixing in“) sono un’estensione del concetto di variabile. Mentre con le variabili possiamo memorizzare un singolo valore CSS (un colore, una dimensione, un bordo, ecc.), grazie ai mixins possiamo dichiarare una classe CSS che contiene più proprietà e poi riutilizzarla a piacimento all’intero del foglio di stile. Vediamo come:

.light-textshadow{
       -webkit-text-shadow:0 1px 2px #888;
       -moz-text-shadow:0 1px 2px #888;
       -o-text-shadow:0 1px 2px #888;
       text-shadow:0 1px 2px #888;
}
...
h1{
      .light-textshadow;
      color: red;
}
#footer h3{
      .light-textshadow;
      color: #333;
}

Semplice no? Abbiamo applicato l’ombra agli elementi h1 e h3 senza alcuna ridondanza nel codice. I mixins sono particolarmente utili quando dobbiamo usare le nuove proprietà CSS3, che vanno scritte sempre con 4 prefissi diversi.
Meglio ancora, i mixins si possono comportare come vere e proprie funzioni, ricevendo in input dei parametri. Vediamo un esempio in cui il colore dell’ombra è personalizzabile nei vari selettori:

.light-textshadow(@shadowcolor: #888){
       -webkit-text-shadow:0 1px 2px @shadowcolor;
       -moz-text-shadow:0 1px 2px @shadowcolor;
       -o-text-shadow:0 1px 2px @shadowcolor;
       text-shadow:0 1px 2px @shadowcolor;
}
...
h1{
      .light-textshadow(#d00);
      color: red;
}
#footer h3{
      .light-textshadow;
      color: #333;
}

Nel caso dell’elemento h1, il colore dell’ombra è impostato a #d00, mentre nel secondo elemento non viene passato alcun valore al mixin, che usa il valore di default (#888) presente nella dichiarazione.

3. Regole annidate

Nei CSS per specificare regole per elementi annidati, dobbiamo spesso usare una serie di selettori che possono diventare abbastanza lunghi e ripetitivi. Ecco un tipico esempio:

#main-menu{ background:#444; }
#main-menu ul{ list-style-type:none; }
#main-menu ul li{ float:left; padding: 0.3em; }
#main-menu ul li a{ color: #44f; }

Usando le regole annidate, possiamo scrivere i selettori all’interno di altri, mostrando in modo più chiaro qual’è la struttura gerarchica degli elementi:

#main-menu{
   background: #444;
   ul{
      list-style-type:none;
      li{
         float: left;
         padding: 0.3em;
         a{
            color: #44f;
         }
      }
   }
}

4. Operazioni

In LESS possiamo eseguire semplici operazioni matematiche su tutti gli attributi di tipo numerico, cioè dimensioni, colori, variabili LESS, ecc. Questo è molto utile quando vogliamo usare valori proporzionali tra di loro, come un colore leggermente più chiaro (o scuro) di un colore base, o la dimensione di un bordo aumentata o diminuita proporzionalmente. Vediamo un esempio:

@basecolor: #c00;
@baseborder: 1px;
...
#header{
   background: @basecolor - #111;  //slightly darker color
   border:solid @baseborder white;
}
h3{
   color: @basecolor + #111;  //slightly lighter color
}
#image-box{
   border:solid @baseborder*2 @basecolor-#111;
}

Come usarlo?

Ovviamente non stiamo usando nessuna magia: il browser non è infatti in grado di interpretare i fogli di stile con estensione .less. E’ necessario convertirli in file standard .css e per questo scopo esistono numerosi metodi. Vediamo i principali:

  • Ruby gem: la soluzione proposta sul sito ufficiale di LESS è scritta in Ruby, un linguaggio molto popolare nel mondo web. Sul sito sono presenti le istruzioni per installare il software e compilare i fogli di stile da LESS a CSS.
    Ad esmpio, su Mac OSX da linea di comando, per installare la “gemma” Ruby:

    $ sudo gem install less

    Poi per compilare un file da LESS a CSS. Se usiamo l’opzione –watch, il compilatore controllerà le modifiche al file LESS e lo ricompilerà automaticamente ad ogni salvataggio:

    $ lessc style.less
    $ lessc style.less --watch
  • App OSX: disponibile solo per Mac OS X, una comodissima app da installare. Sostanzialmente permette di fare le stesse cose della Ruby gem, senza però chiederci di usare la linea di comando
  • Javascript: una libreria Javascript che compila il file LESS on-the-fly all’interno della pagina HTML. Il file .less viene incluso direttamente nel codice come un normale foglio di stile (attenzione però ad usare rel=”stylesheet/less”). Una funzione Javascript si preoccupa quindi di trasformarlo in CSS al momento del caricamento. Questa soluzione, seppur poco indicata per siti in produzione (Javascript è relativamente lento e potrebbe essere disattivato nel browser), è invece ottima nelle fasi di sviluppo e testing, perchè non richiede la ricompilazione continua del codice.
    <link rel="stylesheet/less" href="main.less" type="text/css" />
    <script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>
  • Compilatori in PHP e .NET

Conclusioni

In questo articolo abbiamo visto le principali funzionalità introdotte dal linguaggio LESS per arricchire le già numerose funzionalità offerte dai fogli di stile CSS. LESS non è l’unica soluzione di questo tipo disponibile in rete, ma è probabilmente la più semplice, perché utilizza la stessa sintassi CSS: basta infatti rinominare il foglio di stile da .css a .less e avremo un foglio di stile valido.

SASS è un’altra soluzione molto popolare e ha recentemente introdotto modifiche sostanziali al linguaggio (da .sass a .scss) per allinearsi a quanto fa LESS, ovvero essere compatibile al 100% con la sintassi CSS. In precedenza SASS usava infatti una sintassi diversa, che andava ad eliminare completamente le parentesi graffe dal linguaggio.

A prescindere dalla soluzione scelta, questi tool rendono la vita dei web designer più semplice, permettendoci di scrivere codice più pulito, facile da modificare e da mantenere organizzato. Ovviamente, sono una soluzione molto conveniente solo in caso di fogli di stile di complessità medio-alta, mentre in caso di CSS molto semplici il gioco potrebbe non valere la candela.