Le variabili costituiscono sicuramente uno degli strumenti più utili presenti in Less e rendono il codice più semplice da mantenere evitando di dover ripetere lo stesso valore in diverse parti dei fogli di stile.
Nonostante siano per certi versi simili alle variabili CSS (custom properties), presentano delle peculiarità che le differenziano da quest’ultime. Le variabili CSS non hanno bisogno di un preprocessore ed è possibile modificarle direttamente in Javascript. Al contrario le variabili in Less sono dei semplici contenitori in cui conservare dei valori. In fase di compilazione, nei file con estensione .css, generati a partire dai file .less, le variabili verranno completamente sostituite dai loro valori. La sintassi usata per le variabili prevede l’uso del carattere ‘@’ da anteporre al nome della variabile stessa.
/* file style.less */
// variables
@primary-color: #c0ffee;
@primary-text: #333;
header {
background-color: @primary-color;
color: @primary-text;
}
footer {
background-color: @primary-color;
}
In questo primo esempio abbiamo creato due variabili @primary-color e @primary-text che abbiamo poi assegnato all’interno delle due regole presenti nel file. Se lanciamo il comando lessc, otteniamo il seguente risultato.
/* file style.css */
header {
background-color: #c0ffee;
color: #333;
}
footer {
background-color: #c0ffee;
}
Interpolazione delle variabili in Less
È però grazie al meccanismo dell’interpolazione che è possibile apprezzare le potenzialità delle variabili. Linterpolazione è una funzionalità presente in Less che, attraverso l’uso delle variabili, consente di generare dinamicamente i nomi di proprietà, di selettori, di URL e percorsi usati per riferirsi a risorse esterne. La sintassi dellinterpolazione consiste nel racchiudere il nome di una variabile fra parentesi graffe a cui si antepone il carattere ‘@’ (@{nome-della-variabile}) così come mostrato nell’esempio sottostante.
/* file style.less */
// ======================
// Variabili
// ======================
@primary-color: #c0ffee;
@primary-text: #333;
// variabile per il selettore .main-header
@header-selector: main-header;
// variabile per una proprietà
@property: color;
// uso dell'interpolazione per generare il selettore dinamicamente
.@{header-selector} {
background-color: @primary-color;
}
footer {
background-color: @primary-color;
// uso di una variabile per la proprietà 'color'
@{property}: @primary-text;
}
L’esempio in alto mostra l’uso del meccanismo dell’interpolazione per costruire dinamicamente il selettore ‘.main-header’ e la proprietà color nel blocco di dichiarazioni del footer. Una volta compilato, otteniamo semplicemente il risultato mostrato sotto.
/* file style.css */
.main-header {
background-color: #c0ffee;
}
footer {
background-color: #c0ffee;
color: #333;
}
È anche possibile usare l’interpolazione per creare dinamicamente URL e percorsi come nel seguente esempio.
/* file: _components/header.less */
header{
background-color: darkcyan;
}
/* file: style.less */
@components: "./_components";
@images: "./_images";
@import "@{components}/header.less";
section {
background: url("@{images}/background.jpg")
}
Se ora compiliamo il file style.less, otteniamo il risultato riportato nell’esempio sottostante.
/* file style.css */
header {
background-color: darkcyan;
}
section {
background: url("_images/background.jpg");
}
Variabili di variabili: come assegnare dinamicamente i nomi alle variabili
In Less è anche possibile riferirsi al nome di una variabile attraverso l’uso di un’altra variabile.
/* file style.less */
@width: 321px;
@var-name: width;
.box {
width: @@var-name;
}
Nell’esempio appena illustrato definiamo il valore della proprietà width per gli elementi della classe .box attraverso la sintassi ‘@@var-name’ dove ‘@var-name’ contiene il nome di un’altra variabile ‘@width’ a cui abbiamo assegnato il valore ‘321px’. Il file generato dalla compilazione è riportato sotto.
/* file style.css */
.box {
width: 321px;
}
Usare le proprietà come variabili
Una delle novità introdotte in Less v3.0.0 è la possibilità di usare altre proprietà come variabili. Per indicare che vogliamo usare una certa proprietà come variabile, basterà usare il carattere ‘$’ seguito dal nome della proprietà così come illustrato nell’esempio riportato in basso.
/* file style.less */
@size: 321px;
.square-box {
width: @size;
// abbiamo anteposto il carattere '$' al nome della proprietà
// che vogliamo usare come variabile
height: $width;
}
La proprietà height conterrà quindi lo stesso valore assegnato alla proprietà width.
/* file style.css */
.square-box {
width: 321px;
height: 321px;
}
Visibilità delle variabili
In fase di compilazione, le variabili vengono sostituite con il loro valore dal compilatore. Consideriamo l’esempio sottostante in cui usiamo delle regole annidate. (le regole annidate saranno un argomento della prossima lezione).
/* file style.less */
@foo: 20px;
div {
@bar: 300px;
width: @bar; // 300px
p {
@bar: 100px;
@baz: 200px;
width: @baz; // 200px
height: @bar; // 100px;
font-size: @foo; // 20px
}
}
Una volta compilato, il risultato ottenuto è quello mostrato nel frammento di codice riportato sotto.
/* file style.css */
div {
width: 300px;
}
div p {
width: 200px;
height: 100px;
font-size: 20px;
}
Analizzando il risultato ottenuto, possiamo notare che il compilatore dà precedenza alle variabili locali presenti all’interno di un blocco di dichiarazioni. Se una certa variabile non è presente allora si sale ogni volta di un livello finché non viene trovata la variabile corretta.
