Operazioni e funzioni predefinite in Less CSS

Less consente di eseguire le funzioni aritmetiche basilari come addizione, sottrazione, moltiplicazione e divisione su valori numerici, sui colori e utilizzando le variabili. Vediamo un semplice esempio per capire meglio di cosa si tratta.

/* file style.less */
@default-padding: 20px;

p {
  // operazioni su colori
  background-color: salmon + 2; // salmon: #fc8272
  color: #424242 / 2;
  // operazioni su unità di misura
  font-size: 1em * 2;
  // operazioni con variabili
  padding: @default-padding + 10px;
}

/* file style.css */
p {
  background-color: #fc8274;
  color: #212121;
  font-size: 2em;
  padding: 30px;
}

Funzioni predefinite utili

Less mette a disposizione un gran numero di funzioni predefinite da poter usare per lavorare con i colori, le stringhe e i valori numerici. Per una lista esaustiva è consigliabile consultare la documentazione ufficiale.

Concludiamo invece questa lezione con un semplice esempio che fa uso di alcune delle funzioni predefinite.

/* file style.less */
//=========================================================================
//  Funzioni usate:
//
//  + extract -> estrae un elemento dalla lista
//  + color -> converte una stringa che rappresenta un colore in colore
//  + if  -> restituisce uno dei due valori a seconda che 
//           il primo argomento sia vero o meno
//  + iscolor -> verifica se l'argomento passato è un colore
//  + mix -> mescola due colori secondo la percentuale espressa 
//           come terzo argomento
//=========================================================================


@color-list: "#fed024", "#1e77e2";

@color1: color(extract(@color-list, 1));
@color2: color(extract(@color-list, 2));

@mix-color: if(
  (iscolor(@color1)) and (iscolor(@color2)), 
  mix(@color1, @color2, 50%),
  black // valore assegnato a @mix-color se la condizione non è vera
);

.foo {
  background-color: @mix-color;
}

Se compiliamo il tutto, otteniamo il risultato riportato in basso.

/* file style.css */
.foo {
  background-color: #8ea483;
}

Conclusioni

In questa lezione abbiamo visto come usare le variabili in Less per rendere il codice più leggibile, riutilizzabile ed organizzato. Abbiamo poi mostrato un semplice esempio per capire come usare delle semplici operazioni su valori numerici, colori e variabili. Infine abbiamo illustrato brevemente alcune delle funzioni predefinite. Nel prossimo articolo vedremo come organizzare al meglio il codice che scriviamo grazie alle funzionalità messe a disposizione da Less.