Mixins în LESS

În această lecție ne vom familiariza cu mixins (amestecare), care permit includerea unei clase în interiorul alteia. Să vedem ce sunt și cum să lucrăm cu ele.

În esență, mixins reprezintă utilizarea unor clase în interiorul altora, atunci când o clasă este un șablon - o bucată definită de cod, pe care o putem folosi în multe locuri.

Ce este convenabil la asta? În CSS pur, ar trebui să introducem șablonul de cod peste tot unde este necesar, însă în LESS îl putem scrie într-un singur loc și apoi să-l conectăm în locurile necesare din cod.

Să ne uităm la un exemplu. Să presupunem că avem următoarea clasă:

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

Să folosim această clasă ca mixins:

p {
	.mix;
	color: red;
}

Ca rezultat, după compilare, în paragraf vor fi inserate stilurile clasei noastre:

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

Spuneți care va fi rezultatul compilării următorului cod:

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

p {
	.mix;
	width: 300px;
}