Mixin in SASS

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

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

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

Per dichiarare i mixin si utilizza la directive @mixin, dopo la quale si specifica il suo nome, i parametri e il blocco con il corpo:

styles.scss@mixin mix {
  width: 100px;
  height: 100px;
}