LESS CSS: meno righe, più veloce!

Oggi vi segnalo una risorsa davvero utile per chi è alle prese con progetti web abbastanza corposi che richiedono fogli di stile lunghi decine di metri: LESS CSS è una tecnica di refactoring css, sostituita al foglio di stile permette di assegnare costanti su proprietà che all’interno di un normale css si ripeterebbero all’infinito. Un esempio concreto potrebbe essere il seguente.

Questo è un normale esempio di classi CSS:

.classe1{ width:70px; height:50px; box-shadow: 3px 3px 5px #cc0000; -webkit-box-shadow: 3px 3px 5px #cc0000; -moz-box-shadow: 3px 3px 5px #cc0000; }
.classe2{ width:170px; height:150px; box-shadow: 4px 7px 5px #cc0000; -webkit-box-shadow: 4px 7px 5px #cc0000; -moz-box-shadow: 4px 7px 5px #cc0000; }
.classe3{ width:270px; height:250px; box-shadow: 2px 4px 5px #cc0000; -webkit-box-shadow: 2px 4px 5px #cc0000; -moz-box-shadow: 2px 4px 5px #cc0000; }

Analizziamo le tre classi ho utilizzato per 9 volte l’attributo “box-shadow”. Nella programmazione è possibile raggruppare queste 9 proprietà in classi, funzioni o costanti ed in sostanza è quello che LESS CSS fa in questo modo:

.ombra-box (@x: 0, @y: 0, @blur: 5px, @color: #cc0000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

Creo un costruttore “ombra-box” al quale passo 4 parametri (@x, @y, @blur e @color) di cui agli ultimi 2 (@blur e @color) assegno dei valori di default (5px e #cc0000) poiché nell’esempio si ripetono in tutte e 9 le combinazioni.

.classe1{ width:70px; height:50px;  .ombra-box(2px, 5px); }
.classe2{ width:170px; height:150px;  .ombra-box(4px, 7px); }
.classe3{ width:270px; height:250px;  .ombra-box(2px, 4px); }

Definito il costruttore, assegno alla classe interessata la costante “ombra-box” con i 2 parametri obbligatori.

Tutto questo all’interno di un unico file CSS.

Utilizzo

Basta includere solo 2 file all’interno dei tag head nel seguente ordine:

• file *.css verrà rimpiazzato da un file *.less dove risiederanno classi e proprietà come nell’esempio sopra elencato;
• la libreria less.js che interpreta e decodifica le regole.

Altri esempi

Innumerevoli sono gli esempi e i casi da mostrarvi, eccone alcuni tra i più utilizzati:

Costanti

@base: 200px;
@colore_sfondo: #000000;
@base_url: "http://www.marioconcina.it/";

header#main{ width:@base; background-color:@colore_sfondo; }
header#main nav{ background-image: url("@{base-url}/immagini/menu.gif"); }

Operazioni

@base: 200px;

header#main{ width:300 + @base; }
header#main nav{ width: (@base + 100) * 2; }

Mix di classi

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

.classe{
  width:10px;
  .bordered;
}

Sito di riferimento

Il sito di riferimento si chiama http://lesscss.org dal quale oltre a scaricare la libreria potete consultare altri esempi e utilizzi che non ho elencato in questo articolo.