LESS

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.

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;
 }

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.

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

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

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

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

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;
 }

Sia Sass che Less sono preprocessori CSS, che consentono di scrivere CSS pulito in un costrutto di programmazione invece di regole statiche^[1].

Less si ispira al Sass^[2][3]. Sass è stato progettato sia per semplificare che per estendere i CSS, quindi elementi come le parentesi graffe sono stati rimossi dalla sintassi. Less è stato progettato per essere il più vicino possibile ai CSS e, di conseguenza, i CSS esistenti possono essere utilizzati come codice Less valido^[4].

Le versioni più recenti di Sass hanno anche introdotto una sintassi simile a CSS chiamata SCSS (Sassy CSS).