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:

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

Usiamo questa classe come un mixin:

p {
	.mix;
	color: red;
}

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

p {
	width: 100px;
	height: 100px;
	color: red;
}

Spiegate quale sarà il risultato della compilazione del seguente codice:

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

p {
	.mix;
	width: 300px;
}