Миксины в 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;
}