LESS: quando i CSS diventano dinamici

LESS è un progetto nato con l'obiettivo di espandere le potenzialità  dei fogli di stile attraverso l'aggiunta di variabili, operazioni, funzioni ed altre caratteristiche proprie dei linguaggi di programmazione. Come alcuni sapranno, LESS non è il primo progetto che tenta di spingere i CSS oltre i limiti, ma, a differenza dei suoi colleghi, la sintassi di LESS non stravolge quella che è la sintassi già  nota dei CSS.

Questi che seguono sono solo alcuni esempi di quello che è possibile fare con LESS e sono estratti direttamente dal sito ufficiale.

Variabili

Con LESS è possibile dichiarare delle variabili, ad esempio, in questo caso si è dichiarata una variabile @color e la si è assegnata a due proprietà .

@color: #4D926F;

#header {
   color: @color;
}
h2 {
   color: @color;
}

Interfacce

Sul sito vengono riportate come mixin, ma possiamo tradurle come interfacce. Avremo, dunque, la possibilità  di importare tutte le proprietà  di una classe in una sottoclasse semplicemente includendo il nome della prima come una proprietà  della sottoclasse (vedi #header).

Possiamo anche passare dei parametri alle interfacce, come è stato fatto con #footer:

.rounded-corners (@radius: 5px) {
   border-radius: @radius;
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
}


#header {
   .rounded-corners;
}



#footer {
   .rounded-corners(10px);
}

Affinché il tutto possa funzionare bisogna passare al browser una versione compilata del foglio di stile, scritta non seguendo la sintassi di LESS ma quella propria dei CSS. Ovviamente questo è fatto in automatico, semplicemente aggiungendo alle nostre pagine l'interprete LESS.


<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>


La prima riga importa il foglio di stile, scritto con la sintassi di LESS. Si noti l'estensione .less e l'attributo rel settato a stylesheet/less.
La seconda importa l'interprete scaricabile dal sito ufficiale. àˆ importante che le due chiamate avvengano esattamente in quest'ordine.

Sul sito ufficiale sono disponibili altri esempi e viene spiegato inoltre come far funzionare LESS lato server sfruttando le potenzialità  di node.js.