Mixin in LESS

In questa lezione faremo conoscenza con i mixin (mixing), che permettono di includere una classe all'interno di un'altra. Scopriamo cosa sono e come funzionano.

In sostanza, il mixing è l'utilizzo di alcune classi all'interno di altre, quando una classe funge da modello - un pezzo di codice specifico, che possiamo utilizzare in molti punti.

Perché è comodo? In CSS puro avremmo dovuto scrivere il codice modello ovunque fosse necessario, mentre in LESS possiamo scriverlo in un unico punto e poi includerlo nei punti del codice dove serve.

Vediamo un esempio. Supponiamo di avere la seguente classe:

styles.less.mix {
  width: 100px;
  height: 100px;
}

Usiamo questa classe come un mixin:

styles.lessp {
  .mix;
  color: red;
}

Di conseguenza, dopo la compilazione, nel paragrafo verranno inseriti gli stili della nostra classe:

styles.cssp {
  width: 100px;
  height: 100px;
  color: red;
}

styles.less.mix {
  color: white;
  background: black;
}

p {
  .mix;
  width: 300px;
}