Mixinek a LESS-ben

Ebben a leckében megismerkedünk a keverékekkel (mixinekkel), amelyek lehetővé teszik, hogy egy osztályt egy másik osztályon belül használjunk. Értsük meg, mik ezek és hogyan kell velük dolgozni.

Lényegében a keverék (mixin) azt jelenti, hogy egyes osztályokat más osztályokon belül használunk, amikor egy osztály egy előre megírt kódrészlet – egy olyan kódrész, amelyet számos helyen felhasználhatunk.

Miért kényelmes ez? Tiszta CSS esetén minden alkalommal le kellene gépelnünk ezt a kódrészletet ott, ahol szükséges, míg a LESS-ben egyszer megírhatjuk, majd a kód szükséges részein belül használhatjuk.

Nézzünk egy példát. Tegyük fel, hogy van a következő osztályunk:

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

Használjuk ezt az osztályt keverékként (mixin-ként):

p {
	.mix;
	color: red;
}

Az eredmény a fordítás (kompiláció) után az lesz, hogy a bekezdésbe (p elembe) bekerülnek az osztályunk stílusai:

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

Mondd el, mi lesz a következő kód fordításának eredménye:

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

p {
	.mix;
	width: 300px;
}