Less CSS – Mixin

Diamo un’occhiata veloce ai mixin di Less. Consideriamoli come le funzioni di altri linguaggi di programmazione e vediamo come ci consentono di riutilizzare il codice e creare regole dinamiche.

.main-color() {
  color: red;
}

#h1() {
  font-size: 34px;
}

.title {
  // utilizziamo i due mixin creati in precedenza
  .main-color();
  #h1();
}

Direi che è talmente semplice ed intuitivo che eviterei di spiegarlo. Ricordo solo che utilizzando le parentesi () il mixin risulta “nascosto” e non verrà quindi stampato nel file css

Variabili nei Mixin di Less

Possiamo aggiungere delle variabili ai nostri mixin, proprio come siamo soliti fare con le funzioni in PHP o in altri linguaggi

.button-primary(@border-color:blue,@border-width:2px,@border-style:solid){
border-color:@color;
border-width: @border;
border-style:@border-style,
}
.action{
.button-primary();
}

La variabile @arguments

Posso anche richiamate tutte le variabili della funzione .button-primary() utilizzando la variabile @arguments

.button-primary(@border-color:blue,@border-width:2px,@border-style:solid){
border:@arguments;
}

Mixin e Guard

Altra funzionalità molto interessante che sopperisce alla mancanza del costrutto if…else in less sono le Guard Expression. Passiamo un valore al mixin in base al quale viene determinato il valore dell’elemento. Esempio:

.font-size-base (@width) when (@width >= 1024px) {
  font-size: 24px;
}

.font-size-base (@width) when (@width > 360px) and (@width < 1024) {
  font-size: 18px;
}

.title {
  .font-size-base(480px);
}

Mixin ricorsivi

Ricordiamo inoltre che i mixin possono essere ricorsivi creando interessanti loop di stili css

.boxes-widht(@size, @i: 1) when (@i =< @size) {
  .col-@{i} {
    widht: @i * 150px;
  }
  .boxes-widht(@size, (@i + 1));
}

// richiamo il mixin
.boxes-widht(3);

///stamperà il seguente css
.col-1 {
  widht: 150px;
}
.col-2 {
  widht: 300px;
}
.col-3 {
  widht: 450px;
}

Less Merge

Altra funzionalità interessante la funzione di merge che può concatenare i valori di una funzione tramite virgola (+) o tramite spazi se (+_)

.blog-title() {
  font-family+: 'Montserrat';
}
.title {
  .blog-title();
  font-family+:  Poppins, sans-serif;
}
//stampa
.title{
font-family:'Montserrat', Poppins, sans-serif
}