Миксини в LESS

В този урок ще се запознаем с миксини (примесване), което позволява включването на един клас във вътрешността на друг. Нека разберем какво е това и как се работи с него.

По същество примесването е използването на едни класове вътре в други, когато един клас е шаблон - определено парче код, което можем да използваме на много места.

С какво е удобно това? На чист 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;
}