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

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

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

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

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

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

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

styles.lessp {
  .mix;
  color: red;
}

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

styles.cssp {
  width: 100px;
  height: 100px;
  color: red;
}

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

p {
  .mix;
  width: 300px;
}