CSS dinamici con less

Il linguaggio CSS (Code Style Sheet) è oggi uno degli strumenti più completi e ricchi per l’impostazione di un layout grafico. Negli anni ha raggiunto un livello di complessità tale da comporta la scrittura di codice molto prolisso e ripetitivo. Ecco quindi entrare in gioco LESS, un linguaggio ed un insieme di tool tali da estendere le funzionalità di CSS e allo stesso tempo tali di consentire la scrittura di molto meno codice.

Essendo un linguaggio autonomo, LESS ha bisogno di un compilatore la cui funzione è convertire il codice scritto in fogli di stile di tipo CSS. Il compilatore non è altro che una libreria javascript. Tale compilatore può essere installato sia client-side che server-side.

Di seguito verrà creato un esempio in grado di mostrare le funzionalità più importanti introdotte da LESS. Verrà utilizzata la compilazione client-side.

Prima di iniziare è necessario configurare la pagina html affinchè possa compilare il codice LESS. Aggiungiamo quindi nell’HEADER il seguente codice:

Il file styles.less conterrà il codice LESS che andremo a generare.

Variabili Less – Le variabili ci consentono di specificare i valori più utilizzati in una singola riga di codice, e di riutilizzarla in qualsiasi posizione di codice. Si prenda come esempio un colore il quale dovrà essere utilizzato sia come background-color dell’header che del footer:

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

Less genererà codice CSS andando a sostituire @color con il rispettivo valore.

Mixin – Consente di includere insiemi di proprietà in più classi di stile. E’ possibile specificarne anche dei parametri di input.

.myMixin(@borderValue,@style){
border: @borderValue;
font-style: @style;
}

.classA{
.myMixin(1px,italic);
}

.classB{
.myMixin(2px,italic);
}

Regole annidiate – Invece di scrivere lunghissimi selettori, è possibile specificare selettori all’interno di altri selettori:

#header{
p{  font-size:24px }
}

#body{
p{  font-size:14px }
}

Funzioni e operatori –  E’ possibile moltiplicare addizionare dividere e sottrarre valori di proprietà ad altre mediante l’utilizzo degli operatori numerici. Sono disponibili inoltre numerose funzioni in grado di manipolare tali proprietà. Per un elenco dettagliato si rimanda al sito http://lesscss.org.

Namespace – E’ possibile raggruppare numerose proprietà all’interno di selettori e richiamarne solo alcune. Esempio:

#selector{
.classOne{ font-size: 18px; }
.classTwo{border:1px;}
}

#myDiv{
#selector > .classTwo;
}

Includere file less/css all’interno di altri file less – E’ possibile digitando il comando @import seguito dal nome del file tra apici.

Javascript Evaluation – E’ possibile dare valori alle proprietà richiamando metodi javascript. Ad esempio:

@str: "hello"; 
@var:~`"@{str}".toUpperCase()+ '!'`;
/*@str =>HELLO*/

Il carattere  ~ consente di scrivere valori che non sono riconosciuto come sintassi CSS corretta, e di scrivere codice proprietario non riconosciuto da LESS.

Riferimenti: http://lesscss.org/

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell’universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.