Mixins in LESS

In hierdie les sal ons kennis maak met mixins (bymenging), wat dit moontlik maak om een klas binne-in 'n ander in te sluit. Kom ons vind uit wat dit is en hoe om daarmee te werk.

In wese is bymenging die gebruik van sekere klasse binne ander, wanneer een klas 'n voorbereide stukkie kode is, wat ons op baie plekke kan gebruik.

Waarom is dit handig? In suiwer CSS sou ons die voorbereide kode oral moes herhaal waar dit nodig is, maar in LESS kan ons dit op een plek skryf en dit dan op die nodige plekke in die kode inprop.

Kom ons kyk na 'n voorbeeld. Gestel ons het die volgende klas:

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

Kom ons gebruik hierdie klas as 'n bymenging:

p {
	.mix;
	color: red;
}

As gevolg hiervan sal die style van ons klas in die paragraaf ingevoeg word na kompilering:

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

Vertel wat die resultaat van die kompilering van die volgende kode sal wees:

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

p {
	.mix;
	width: 300px;
}