LESS: quando i CSS diventano dinamici
Mercoledì 31 Agosto 2011 - 12:18
di Mariano Calandra
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.
Commenti
1
Avevo scritto un articolo a proposito, tempo fa, su html.it :)
http://css.html.it/articoli/le.....-con-less/# - postato da Andrea - 31 Agosto 2011 - 12:51
2
@Andrea: Prima di scrivere mi ero accertato solo che non esistesse nulla qui sul blog. Avessi controllato pure il sito avrei riportato l’articolo. ;)
# - postato da Mariano Calandra - 31 Agosto 2011 - 13:31
3
Molto ma molto interessante. Lo provo subito
4
esiste anche sass: http://sass-lang.com/
# - postato da Antonio Salvati - 31 Agosto 2011 - 15:35
5
In uno scenario di ottimizzazione delle risorse come quello che dovrebbe sempre essere Internet, trovo aberrante aggiungere sforzo computazionale per linguaggi statici di basso livello come i CSS.
# - postato da Slam - 31 Agosto 2011 - 17:00
6
Secondo me è una cosa utilissima e spero che sia un progetto che prenda piede davvero.
7
Chissà se questa funzionalità potrà esistere come implementazione dei css4 :)
# - postato da Alessio - 31 Agosto 2011 - 19:33
8
Scusata, non ho capito una cosa sull’installazione lato server…
Serve l’accesso al server via SSH per effettuare la configurazione??? o si può fare in altro modo?# - postato da Luca - 31 Agosto 2011 - 21:08
9
penso che si tratti di sforzo di compilazione solo in ambiente di sviluppo… riguardo alla produzione lo compili prima e via… credo, ma approfondirò la cosa, mi piace hheh
# - postato da gigi - 01 Settembre 2011 - 01:16
10
@Slam: nessuno sforzo computazionale. Scrivi i tuoi stili in LESS (o anche SASS), li compili e ottieni un normale CSS da servire sul sito.
# - postato da Andrea - 01 Settembre 2011 - 10:00
11
@Andrea
Si quello è l’approccio migliore, ma l’articolo invece parla di far fare la compilazione sul lato client usando un file javascriptPersonalmente non sono un gran fan di LESS. Alcune cose come variabili e interfacce sono effettivamente utili, ma altre come l’ereditarietà sono più dannose che altro.
Scrivere i propri CSS in modo gerarchico può sembrare una buona idea, ma se non si fa attenzione i css cresceranno in dimensione (perchè magari al posto di avere #notizia avremo .pagina .notizie #notizia) e in specificità, rendendo il riutilizzo più difficile.# - postato da Giacomo - 03 Settembre 2011 - 17:42