LESS

Da Wikipedia, l'enciclopedia libera.
Jump to navigation Jump to search

Less (LESS) è un preprocessore CSS che estende il normale linguaggio CSS permettendo (oltre alla normale sintassi dei fogli di stile) anche l'utilizzo di funzioni, operatori e variabili, la nidificazione delle istruzioni, la creazione di "mixin" e numerose altre caratteristiche che rendono il codice più facile da scrivere, da mantenere e da comprendere.

LESS è open source ed è scritto in JavaScript.

Funzionamento[modifica | modifica wikitesto]

LESS prevede che le istruzioni css siano contenute in un file .less, che godrà sia delle comuni caratteristiche sintattiche del CSS sia delle peculiari istruzioni di LESS. Questo file può essere impiegato in due modi:

  • includendo direttamente nella pagina HTML il file .less insieme a uno script Javascript (di nome less.js, scaricabile dal sito ufficiale) che, quando il browser farà il rendering della pagina, si occuperà di fare il parsing compilando codice css che sarà automaticamente inserito all'interno del tag <head></head> del documento html.
  • includendo nella pagina HTML il file .css compilato, generato da un programma di terze parti che si occupi di fare il parsing del file .less.

Caratteristiche[modifica | modifica wikitesto]

Variabili[modifica | modifica wikitesto]

Le variabili funzionano esattamente come nei normali linguaggi di programmazione. Possono essere definite tramite il simbolo @.

Ad esempio, il seguente codice:

 @rosso: #ff0000;
 
 a {color: @rosso}
 h1 {border-color: @rosso;}
 strong{background-color: @rosso;}

darà come risultato questo CSS compilato:

 a {color: #ff0000}
 h1 {border-color: #ff0000;}
 strong{background-color: #ff0000;}

L'utilizzo di variabili è molto utile perché consente di modificare in un'unica volta tutte le occorrenze di un certo valore (ad esempio, un codice cromatico esadecimale, un valore in pixel, un tipo di carattere, ecc.) all'interno dell'intero file LESS.

Nidificazione[modifica | modifica wikitesto]

In LESS è possibile nidificare le istruzioni, rendendo il codice più compatto, conciso e leggibile.

La linea gerarchica dei selettori ricalcherà la struttura del listato: inserire un selettore tra le istruzioni di un altro selettore farà diventare quel selettore il figlio del selettore che lo contiene.

Ad esempio, questa serie di istruzioni:

 div{
    width: 200px;
    p{
       font-size: 20px;
       strong{
          color: blue;
          text-decoration: underline;
       }
    }
 }

genererà il seguente CSS compilato:

 div{
    width: 200px;
 }
 
 div p{
    font-size: 20px;
 }
 
 div p strong{
    color: blue;
    text-decoration: underline;
 }

Mixin[modifica | modifica wikitesto]

I mixin sono "set di istruzioni" che possono essere richiamati tra le proprietà di qualsiasi selettore. Qualsiasi classe o id può essere usato come mixin. Se si vuole definire un mixin senza che esso compaia come output nel css compilato, è sufficiente posporre una coppia di parentesi tonde () quando il mixin viene definito.

Classe o id come mixin[modifica | modifica wikitesto]

Codice LESS:

 .mixin{
    color: red;
    font-weight:bold;
 }
 
 p{
    font-size:18px;
    .mixin;
 }

CSS compilato:

 .mixin{
    color: red;
    font-weight:bold;
 }
 
 p{
    font-size:18px;
    color: red;
    font-weight:bold;
 }

Mixin escluso dall'output[modifica | modifica wikitesto]

Codice LESS:

 .mixin(){
    color: red;
    font-weight:bold;
 }
 
 p{
    font-size:18px;
    .mixin;
 }

CSS compilato:

 p{
    font-size:18px;
    color: red;
    font-weight:bold;
 }

Operatori[modifica | modifica wikitesto]

LESS permette di effettuare operazioni aritmetiche inserendo i valori tra parentesi tonde. Questo è molto utile se combinato con le possibilità offerte dalle variabili.

Ad esempio:

 @var: 200px;
 
 div{
    width: (@var + 20px );
 }

Genererà:

 div{
    width: 220px;
 }

Collegamenti esterni[modifica | modifica wikitesto]

Informatica Portale Informatica: accedi alle voci di Wikipedia che trattano di informatica