Mixins i LESS

I denne lektion vil vi stifte bekendtskab med mixins (blanding), som gør det muligt at inkludere én klasse inde i en anden. Lad os finde ud af, hvad det er, og hvordan man arbejder med det.

I bund og grund er mixins brugen af én klasse inde i andre, hvor én klasse er en forhåndsudarbejdet del - et bestemt stykke kode, som vi kan bruge mange steder.

Hvordan er dette praktisk? I ren CSS ville vi være nødt til at skrive det forhåndsudarbejdede stykke kode overalt, hvor det er nødvendigt, men i LESS kan vi skrive det ét sted og derefter tilføje det til de nødvendige steder i koden.

Lad os se på et eksempel. Antag, at vi har følgende klasse:

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

Lad os bruge denne klasse som et mixin:

p {
	.mix;
	color: red;
}

Som et resultat af kompileringen vil stilene fra vores klasse blive indsat i afsnittet:

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

Forklar, hvad resultatet af kompileringen af følgende kode vil være:

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

p {
	.mix;
	width: 300px;
}