Mixins in LESS

In deze les maken we kennis met mixins (vermenging), waarmee we de ene klasse in de andere kunnen opnemen. Laten we uitzoeken wat dit is en hoe ermee te werken.

In wezen is een mixin het gebruik van de ene klasse binnen een andere, waarbij de ene klasse een sjabloon is - een bepaald stuk code dat we op veel plaatsen kunnen gebruiken.

Waarom is dit handig? In pure CSS zouden we het code-sjabloon overal moeten invoeren waar het nodig is, terwijl we in LESS de code op één plaats kunnen schrijven en het vervolgens op de gewenste plaatsen in de code kunnen insluiten.

Laten we een voorbeeld bekijken. Stel dat we de volgende klasse hebben:

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

Laten we deze klasse gebruiken als mixin:

p {
	.mix;
	color: red;
}

Als resultaat worden na compilatie de stijlen van onze klasse in de paragraaf geplaatst:

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

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

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

p {
	.mix;
	width: 300px;
}