LESS-тегі миксиндер

Бұл сабақта біз миксиндер (қоспалармен) танысамыз, олар бір класты екіншісінің ішіне енгізуге мүмкіндік береді. Оның не екенін және онымен қалай жұмыс істеу керектігін бірге қарастырайық.

Негізіnde, миксин - бұл бір кластарды басқаларының ішінде қолдану, яғни бір класс кодтың белгілі бір бөлігі ретінде - үлгі болып табылады, біз оны көптеген жерлерде пайдалана аламыз.

Бұл неге ыңғайлы? Таза CSS-те бізге код үлгісін ол қажет болатын барлық жерлерде енгізу үшін теріп шығу керек еді, ал LESS-те оны бір жерде жазып, содан кейін кодтың қажетті жерлерінде қосуға болады.

Мысалға қарайық. Бізде келесі класс бар делік:

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

Осы класты миксин ретінде қолданайық:

p {
	.mix;
	color: red;
}

Нәтижесінде, компиляциядан кейін абзацқа біздің класс стильдері еніп қалады:

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

Келесі кодтың компиляция нәтижесі қандай болатынын түсіндіріңіз:

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

p {
	.mix;
	width: 300px;
}