In quest’ultima lezione parleremo dei mixin, una delle funzionalità più interessanti presenti in Less. Abbiamo già accennato brevemente all’argomento nelle precedenti lezioni. In questa cercheremo di capire meglio di cosa si tratta.
Cosa sono i mixin in Less
Si tratta di uno strumento configurabile che consente di riutilizzare il codice e aggiungere delle dichiarazioni in una regola in maniera dinamica. Possiamo dire che i mixin svolgono lo stesso ruolo ricoperto dalle funzioni nei linguaggi di programmazione.
Come creare e usare i mixin
Il modo più immediato per cominciare a usare i mixin consiste nel creare semplicemente una regola con un selettore di tipo .classe o #id. Al suo interno aggiungiamo semplicemente delle dichiarazioni che potremo quindi inserire in un altro blocco attraverso una sintassi che ricorda quella dell’invocazione di una funzione.
/* file style.less */
.foo {
font-size: 16px;
}
#bar {
color: #161718;
}
#baz {
color: chartreuse;
}
p {
// invoca i due mixin
.foo();
#bar();
}
a {
// invoca il terzo mixin
#baz();
}Compilando il file style.less otteniamo il risultato mostrato sotto.
/* file style.css */
.foo {
font-size: 16px;
}
#bar {
color: #161718;
}
#baz {
color: chartreuse;
}
p {
font-size: 16px;
color: #161718;
}
a {
color: chartreuse;
}Mixin "nascosti"
A questo punto la prima modifica che vogliamo effettuare consiste nel non mostrare i mixin nel file style.css. Basterà semplicemente aggiungere delle parentesi tonde dopo il nome del mixin in fase di definizione.
/* file style.less */
// aggiungiamo una coppia di parentesi ai mixin
.foo() {
font-size: 16px;
}
#bar() {
color: #161718;
}
#baz() {
color: chartreuse;
}
p {
.foo();
#bar();
}
a {
#baz();
}Mixin con parametri
Nell’esempio appena mostrato abbiamo due mixin contenenti la stessa proprietà color con valore differente. Possiamo evitare simili situazioni utilizzando dei parametri come nell’esempio riportato sotto.
/* file style.less */
.bar(@color: cornflowerblue, @hover-color: crimson) {
color: @color;
&:hover {
color: @hover-color
}
}
a {
.bar();
}
.special-link {
.bar(chocolate)
}Il mixin .bar presenta due parametri aventi entrambi un valore di default. Possiamo quindi invocare i mixin senza argomenti o specificandoli così come faremmo con una funzione.
La variabile @arguments
All’interno di ogni mixin la variabile @arguments ha un valore speciale dal momento che contiene tutti gli argomenti passati al mixin quando viene chiamato.
/* file style.less */
.border(@border-width: 1px, @border-style: solid, @border-color: #000) {
border: @arguments;
}
p {
.border(2px, solid, #ccc);
}/* file style.css */
p {
border: 2px solid #ccc;
}Mixins con valore di ritorno
Le variabili definite in un mixin sono visibili all’esterno e possono essere utilizzate all’interno della regola in cui è stato chiamato il mixin. Se però tale regola contiene già una variabile con lo stesso nome di quella presente nel mixin, allora quest’ultima non sarà visibile all’esterno.
/* file style.less */
.fonts() {
@font-size: 1.2em;
@text-transform: uppercase;
@font-weight: bold;
}
.foo {
@font-weight: 100;
.fonts();
font-size: @font-size;
text-transform: @text-transform;
font-weight: @font-weight; // 100
}/* file style.css */
.foo {
font-size: 1.2em;
text-transform: uppercase;
font-weight: 100;
}Mixin e Guard
In Less non è presente una struttura condizionale fondamentale come il costrutto if…else, in compenso è possibile ottenere lo stesso risultato attraverso l’uso delle cosiddette Guard applicate ai Mixin. La sintassi è piuttosto lineare ed espressiva.
/* file style.less */
.font-size (@width) when (@width >= 1024px) {
font-size: 20px;
}
.font-size (@width) when (@width > 480px) and (@width < 1024) {
font-size: 18px;
}
.font-size (@width) when (@width <= 480px) {
font-size: 16px;
}
.foo {
.font-size(480px)
}Nell’esempio appena visto, passiamo un valore al mixin e in base a tale valore viene determinato la dimensione dei caratteri per tutti gli elementi della classe foo.
/* file style.css */
.foo {
font-size: 16px;
}Mixin ricorsivi
I mixin possono invocare se stessi. Con l’aiuto delle Guard Expression è quindi possibile creare dei mixin ricorsivi e ottenere dei risultati davvero interessanti.
/* file style.less */
.translate-boxes(@size, @i: 1) when (@i =< @size) {
.box-@{i} {
transform: translate(@i * 150px);
}
.translate-boxes(@size, (@i + 1));
}
// invoca il mixin
.translate-boxes(5);Compilando il file mostrato sopra otteniamo il frammento di codice riportato sotto.
/* file style.css */
.box-1 {
transform: translate(150px);
}
.box-2 {
transform: translate(300px);
}
.box-3 {
transform: translate(450px);
}
.box-4 {
transform: translate(600px);
}
.box-5 {
transform: translate(750px);
}Usare Merge per combinare le proprietà in Less
L’ultima funzionalità che vediamo prende il nome di Merge e permette di unire i valori di più proprietà in una sola lista separata da virgole o spazi che viene assegnata ad un’unica proprietà analoga a quelle di partenza. Cerchiamo di chiarire meglio il concetto con due esempi.
Creare una lista separata da virgole
Utilizzando un mixin e appendendo il carattere ‘+’ a due proprietà omonime creiamo una nuova proprietà che ha come valore una lista dei valori delle proprietà originali separati da virgole.
/* file style.less */
.courier-new() {
font-family+: 'Courier New';
}
.code {
.courier-new();
font-family+: Courier, monospace;
}/* file style.css */
.code {
font-family: 'Courier New', Courier, monospace;
}Creare una lista separata da spazi
Il meccanismo è identico a quello appena visto anche nel caso di una lista di valori separati da spazi. In questo caso useremo però i due caratteri ‘+_’.
/* file style.less */
.scale() {
transform+_: scale(1.5);
}
.foo {
.scale();
transform+_: translate(150px);
}/* file style.css */
.foo {
transform: scale(1.5) translate(150px);
}Conclusioni
In quest’ultima lezione abbiamo illustrato uno dei concetti più interessanti di Less, ovvero i mixin. Con questo argomento completiamo questa breve guida in cui abbiamo cercato di sintetizzare in poco tempo alcune delle funzionalità più utili di Less. Per ulteriori dettagli e approfondimenti è comunque opportuno consultare la documentazione ufficiale.
