LESS & CSS: Come velocizzare i tempi di sviluppo?
Il pregio dei fogli di stile di essere semplici può diventare un difetto nel momento in cui vogliamo farne un utilizzo più professionale ed evoluto. Scopriamo insieme Less, uno strumento che ci permette di ovviare a questo problema.
Cos’è LESS?
Less è un foglio di stile dinamico che estende la sintassi standard dei CSS rendendo possibile l’utilizzo di variabili, mixins, operazioni e funzioni.
Less e le altre estensioni a lui simili si compongono di due parti: il linguaggio e il compilatore, quest’ultimo, sviluppato in javascript, traduce il foglio di stile dinamico in semplice CSS in modo che sia interpretabile da tutti i browser.
Come installare Less?
Utilizzare Less è molto semplice, per prima cosa devi inserire il foglio di stile dinamico e il compilatore all’interno del tag <head> nella pagina web che stai sviluppando:
<script type="text/javascript" src="less.js"></script> …
ATTENZIONE! Il foglio di stile dev’essere inserito prima dello script.
Come puoi vedere, l’attributo rel assume il valore stylesheet/less e poco dopo viene aggiunto il file javascript (scaricabile a questo indirizzo: http://lesscss.org/) che compila, lato client, il file .less.
Ricorda, è meglio far uso di questo metodo solo durante la fase di sviluppo del sito, dopo la pubblicazione, invece, per migliorare le prestazioni, è buona norma utilizzare un foglio di stile compilato e, magari, minificato.
Per compilare un file scritto in Less puoi adoperare less.app su Mac OSX oppure SimpLess su Windows.
Come utilizzare le variabili?
Una variabile permette di specificare un valore che verrà riutilizzato nei selettori all’interno del foglio di stile. Le variabili in Less possono essere dichiarate con il simbolo @ seguito dal nome e dal valore della variabile, vediamo un esempio:
@color: #F0F0F0;
#header{
color: @color;
}
Non male! Ora proviamo con un esempio molto più utile, immagina di lavorare ad un sito composto essenzialmente da tre colori:
@orange: #FB8B31;
@aqua: #7ECCBA;
@pink: #FECEA8;
@firstColor: @aqua;
@secondColor: @orange;
@thirdColor: @pink;
body{
background: @thirdColor;
color: @primaryColor;
}
a:link{
color: @secondColor;
}
Se il tuo cliente cambia idea sui colori puoi cambiarli in pochissimi passaggi senza dover controllare tutto il foglio di stile.
Mixins: come funzionano?
Con l’avvento del CSS3 per supportare tutti i browser siamo costretti ad utilizzare prefissi come –webkit- o –moz-, quindi se volessi un div con i bordi arrotondati dovrei scrivere il seguente codice:
#shape1{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Less ci viene in aiuto con i mixins che permettono di specificare le proprietà di cui abbiamo bisogno all’interno di una classe, l’esempio ti renderà tutto più chiaro:
.rounded-corners(@radius: 5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#shape1{
.rouded-corners;
}
#shaper2{
.rounded-corners(10px);
}
Ogni volta che chiamiamo .rounded-corners verranno stampati i valori all’interno della classe specificata con il valore passato come parametro oppure il valore di default.
Regole nidificate, che comodità!
Less consente di scrivere regole nidificate in modo da avere un CSS più organizzato. Vediamo un esempio con un menu di navigazione, se non usassi Less dovrei scrivere quanto segue:
ul#nav{
list-style: none;
}
ul#nav li{
display: inline;
margin: 0;
padding: 0;
}
ul#nav li a{
color: #aaa;
font-size: 1em;
}
ul#nav li a:hover{
color: #000;
}
Ora proviamo usando Less:
ul#nav{
list-style: none;
li{
display: inline;
margin: 0;
padding: 0;
a{
color: #AAA;
font-size: 1em;
&:hover{ color: #000; }
}
}
}
Il compilatore Less farà il resto e tradurrà quanto abbiamo scritto nel codice di prima.
Come utilizzare funzioni e operatori?
Less consente anche di usare operatori e funzioni per manipolare valori numerici, colori e variabili:
@default-h1-size: 5em;
@default-color: #555;
h1{ font-size: @default-h1-size; }
h2{ font-size: @default-h1-size * .8; }
h3{ font-size: @default-h1-size * .6; }
h4{ font-size: @default-h1-size * .4; }
h5{ font-size: @default-h1-size * .2; }
#header{
background: lighten(@default-color, 40%);
color: darken(@default-color: 60%);
}
Abbiamo quindi visto come Less può rendere molto più facile il tuo lavoro, ovviamente questa è solo una piccola anticipazione delle potenzialità di questo strumento.
Nel sito ufficiale puoi trovare una documentazione dettagliata e molti esempi che ti permetteranno di entrare nella filosofia alla base del progetto, dopo ovviamente l’unico limite sarà la tua immaginazione ed io sono proprio curioso di vedere dove ti porterà!
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
18 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
Semplice ed essenziale!
Grazie, ora mi sono fatto un’idea e nel prossimo progetto lo userò!
Felice di vedere il tuo nome tra gli autori di YIW :) Ottimo articolo caro Marco, semplice, utile ed efficace. Onestamente non conoscevo less, ma adesso mi sa che darò uno sguardo ;)
Ciao! Grazie mille! :) Io lo uso da diverso tempo per i miei progetti e mi trovo veramente bene, oltretutto appena inizi a prenderci mano puoi creare una tua tecnica di utilizzo personale e questo velocizza ancora di più le cose!
Sicuramente richiede un pò più di sforzo iniziale, nell’impostare e strutturare tutte le varie “variabili” ma in fase di scrittura del CSS credo che risulterà più veloce. Decisamente da provare, magari questa è la volta buona. Se usassimo questo metodo anche in produzione, ne risentirebbe di molto il tempo di caricamento?
Purtroppo non ho dati in mano per fare un confronto tuttavia ti basta pensare anche solo a questo, se l’utente ha javascript disabilitato? Non vedrebbe nessuno stile…
Se vuoi Less anche in fase di produzione potresti pensare di usare un interprete server-side c’è per PHP (http://leafo.net/lessphp/), Ruby on Rails e Node.js.
Ho usato LESS per progetti personali é molto utile perché velocizza molto il lavoro!
Preferisco usare l’app di LESS affinché credo il codice in locale e poi esporto il CSS completo senza l’uso di dello script js!
Altrimenti è comodo anche creare un file .php, aggiungere
combinando css e php
Se ho capito bene, ti permette di “dichiarare” tutti gli stili all’inizio, per poi richiamarli dove ti servono?
Esattamente, all’inizio puoi dichiarare le variabili per colori, dimensioni, bordi,… oppure i mixins che sono veramente utilissimi… poi con il tempo inizierai a crearti una tua tecnica di utilizzo e da lì la strada è tutta in discesa!
Ottimo davvero interessante!
Grazie! :)
@manuela esatto, è come in programmazione, dove dichiari variabili e le richiami quando più ti fa comodo.
A chi non è mai capitato di aprire Firebug (o l’inspector di Chrome) per trovare in che riga sta e che colore ha un certo elemento? Oppure dover andare a cambiare colori, ombreggiature, angoli arrotondati, ecc. di più elementi?
Con LESS modifichi solo una volta la variabile interessata e hai fatto =)
Vi segnalo http://css2less.cc/ per trasformare un comune CSS nelle logiche di LESS
Io sto usando ormai da 6 mesi Sass che è simile, devo dire che la curva di apprendimento è molto veloce e dopo un po’ sono arrivato a crearmi una personale libreria che mi sta velocizzando notevolmente lo sviluppo del css.
Consiglio a chiunque di provarlo ed investirci del tempo perchè ne vale assolutamente la pen.
Ne avevo già sentito parlare su codrops, ma poi non ho avuto tempo di approfondire, ora la mia domanda è se sia fattibile/conveniente usare less anche con template di joomla, inoltre non mi è chiaro il ruolo del compilatore, serve mentre sviluppo il sito o solo prima di andare online.
grazie
Grazie! Marco. Merita una lettura. Eccellente!
Una bomba!
Ottimo articolo, grazie mille : )