LESS CSS: meno righe, più veloce!

LESS CSS: meno righe, più veloce!

1760
9
CONDIVIDI

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.
<script src="less.js" type="text/javascript"></script>

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.

  • Silvia Paldini

    ormai stiamo raggiungendo un livello incredibilmente incasinato!

  • francesco

    Credo sia giusto così, anche perché si ottiene una coerenza semantica ragionando in questa maniera. Unica perplessità sono in termini di velocità, i css sono stati introdotti appositamente per ordinare ed abbattere la lentezza di caricamento delle pagine html, con less css non solo viene caricato il css ma bisogna anche decompilarlo con un javascript che va incluso. Tutto sommato è ottimo a livello concettuale si risparmiano un sacco di dichiarazioni!

  • Nunzio Sabatini

    E’ compatibile con tutti i browser? Qualcuno l’ha testato efficacemente su dei progetti validi?

    • graziano cioffi

      la guida dice IE6+, webkit e firefox

  • francesco

    ciao a tutti vorrei capire come poter creare una costante sulla proprietà box-shadow cambiando anche il colore di volta in volta……io provo con

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

    ma non funziona più nulla…mentre se reimposto il colore va bene.

  • Daniela Giacchetti

    figo!

  • fabio

    E’ vero che stiamo raggiungendo livelli incasinati ma di cosa stiamo parlando se, ad esempio html5 non è ancora stato standardizzato?

  • pask83

    Utile per se hai a che fare con moltissime proprietà css3. Mi segno il tuo blog. Molto interessante.

  • Giovanni Villani

    complimenti per l’articolo davvero interessante. Mi è sorto un dubbio. Utilizzando LESS il sito web incontra problema nella fase di validazione secondo gli standard W3C oppure no?