Che siate web designer o web developer sicuramente avete a che fare tutti i giorni con CSS, un linguaggio molto semplice, costituito da regole e blocchi di dichiarazioni che non necessita di essere compilato per poter funzionare.
Le sue limitazioni e mancanze avranno fatto storcere il naso più volte agli sviluppatori più navigati ma dopotutto è comprensibile: non si tratta di un linguaggio di programmazione bensì di un linguaggio di formattazione e quindi la semplicità deve essere al centro di tutto.
C’è un modo però per estendere le potenzialità di CSS somministrandogli una carica di steroidi chiamati “LESS”.
LESS in gergo è un preprocessore: in parole povere si tratta di scrivere i CSS in un nuovo e potenziato linguaggio (LESS appunto) che verrà compilato in un file CSS in grado di essere letto dai browser web.
I maggiori preprocessori sul web sono LESS e SASS ma preferisco il primo per la semplicità d’uso e la facilità di apprendimento, oltre al fatto che mantiene la sintassi di CSS praticamente inalterata.
Come si usa Less
LESS può essere utilizzato in 2 modi:
1. includendo il file LESS al posto del CSS seguito da un piccolo file JS che si prenderà carico della compilazione:
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>
2. Oppure, il metodo migliore a mio parere, includendo il file LESS al posto del CSS ma lasciando la compilazione ad un piccolo software che una volta installato sul vostro PC o Mac si occuperà di tutti i vostri progetti LESS.
Per chi usa un sistema Mac i migliori software a disposizione sono CodeKit e SimpLESS mentre per gli utenti Windows c’è l’ottimo WinLESS.
Includete il file LESS, scrivete il vostro CSS e ad ogni salvataggio il software farà partire una compilazione che automaticamente creerà un file CSS (volendo anche compresso!) nella cartella che preferite. Tutto qui. Semplice vero? Adesso che avete incluso LESS nel vostro progetto siamo pronti a sfruttarne tutte le potenzialità.
Diamo un pò di steroidi al CSS
Mi piace pensare a CSS come una specie di Super Sayan che, al bisogno, carica la propria aura fino a diventare su Super Sayan di 2° livello grazie a LESS.
Effettivamente la sensazione è questa: tutto ciò che abbiamo sempre desiderato poter fare con CSS, grazie a LESS, è ora possibile e in particolare l’utilizzo di:
- stili annidati
- variabili
- funzioni ed operazioni
- classi miste
- classi parametrizzate
Se ad esempio la grandezza del carattere del nostro sito web è di 14 pixels e non vogliamo ripeterla ogni volta possiamo dichiarare una variabile e richiamarla quando vogliamo:
@fontsize : 14px;
section p {
font-size: @fontsize;
}
In questo modo se volessimo cambiare la grandezza del carattere per tutti gli elementi basterà farlo una sola volta nella dichiarazione della variabile @fontsize.
Un’altra caratteristica interessante sono gli stili annidati:
section {
color: red;
p {
font-size: @fontsize;
}
.intro {
color: #333;
}
}
Il CSS compilato sarà simile a questo:
section { color: red; }
section p { font-size: @fontsize; }
section .intro { color: #333; }
Bello vero? E questo è niente: adesso il Super Sayan di 2° livello sta per trasformarsi in un Super Sayan di 3° livello.
Le classi miste e le classi parametrizzate
Non sarà biondo e con i capelli lunghi ma LESS è veramente un portento e le classi miste e parametrizzate ne sono la dimostrazione.
Immaginate di dare degli stili ad una classe come avete sempre fatto fino ad ora:
.rounded {
border-radius: 10px;
}
Niente di nuovo ma la cosa strepitosa è che con LESS sarà possibile fare anche questo:
section {
.rounded;
}
E non è finita qui perchè possiamo fare di meglio:
.rounded (@radius) {
border-radius: @radius;
}
In questo modo abbiamo una funzione parametrizzata che possiamo usare quando e dove vogliamo impostando un valore di smussatura diverso volta per volta:
section {
.rounded(15px);
}
FU-SIO-NEEEEEE!
A questo punto il Super Sayan di 3° livello potrebbe diventare tranquillamente di 4° livello e, perchè no, fare anche la fusione per diventare più potente.
Con questo articolo tuttavia non voglio scendere troppo in tecnicismi che finirebbero per demotivare i novizi nell’utilizzo di questo fantastico preprocessore.
Una cosa è certa: l’utilizzo di LESS vi consente di risparmiare molto tempo in fase di sviluppo e soprattutto in fase di mantenimento e modifica.
Le variabili e gli stili annidati sono due caratteristiche che a CSS mancano e che, secondo il mio punto di vista, andrebbero implementate come standard. Fino ad allora però, LESS rimane l’unica alternativa per utilizzarle.
Utilizzate LESS o SASS? Come vi trovate e come lo utilizzate? Fatecelo sapere nei commenti!
