Mixins i LESS

I den här lektionen kommer vi att bekanta oss med mixins (blandning), som gör det möjligt att inkludera en klass inuti en annan. Låt oss ta reda på vad det är och hur man arbetar med det.

I grund och botten är en mixin användningen av klasser inuti andra klasser, där en klass fungerar som en förformad bit kod som vi kan använda på många ställen.

Varför är detta praktiskt? I ren CSS skulle vi vara tvungna att skriva den förformade koden överallt där den behövs, medan vi i LESS kan skriva den på ett ställe och sedan inkludera den på de ställen i koden där den behövs.

Låt oss titta på ett exempel. Låt oss säga att vi har följande klass:

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

Låt oss använda den här klassen som en mixin:

p {
	.mix;
	color: red;
}

Som ett resultat av kompileringen kommer stilarna från vår klass att sättas in i stycket:

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

Berätta vad som blir resultatet av kompileringen av följande kod:

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

p {
	.mix;
	width: 300px;
}