Примеси

Примеси (англ. mixin) позволяют добавлять существующие стилевые правила к другим селекторам. Это сокращает код, поскольку нам уже нет смысла повторять один и тот же фрагмент кода несколько раз, достаточно сослаться на него в нужном месте. Примеси в этом плане похожи на функции в языках программирования.

Примеси в Less это обычные селекторы классов или идентификаторы. В примере ниже мы создаём два класса — left-mixin и right-mixin для выравнивания элементов, соотвественно, по левому или правому краю веб-страницы. Если нам требуется повторить свойства у другого селектора, то мы пишем имя класса с точкой впереди — .left-mixin или .left-mixin(). Для идентификатора вызов будет как #left-mixin. Круглые скобки пишутся по желанию, они в данный момент не играют роли.

.left-mixin {
  float: left;
  margin: 0 10px 10px 0;
}
.right-mixin {
  float: right;
  margin: 0 0 10px 10px;
}
.img-left {
  .left-mixin;
  background: #f0f0f0;
  padding: 10px;
}
.img-right {
  .righ-mixin;
  background: #f0f0f0;
  padding: 10px;
}

На выходе мы получим такой стиль:

.left-mixin  {
  float: left;
  margin: 0 10px 10px 0;
}
.right-mixin {
  float: right;
  margin: 0 0 10px 10px;
}
.img-left {
  float: left;
  margin: 0 10px 10px 0;
  background: #f0f0f0;
  padding: 10px;
}
.img-right {
  float: right;
  margin: 0 0 10px 10px;
  background: #f0f0f0;
  padding: 10px;
}

Заметьте, что повторяющиеся свойства не группируются по селекторам и в коде остались наши классы left-mixin и right-mixin. Если они сами по себе не требуются и нужны лишь для вызова в других местах, то их можно убрать из CSS, добавив к имени класса круглые скобки. В остальном никаких изменений нет.

.left-mixin() {
  float: left;
  margin: 0 10px 10px 0;
}
.img-left {
  .left-mixin;
  background: #f0f0f0;
  padding: 10px;
}

В CSS останется только следующее:

.img-left {
  float: left;
  margin: 0 10px 10px 0;
  background: #f0f0f0;
  padding: 10px;
}

Скобки в примесях нужны ещё и для передачи в них переменных, как показано ниже.

.animation(@name, @time, @time-fun) {
  animation: @name @time @time-fun;
  -webkit-animation: @name @time @time-fun;
}
body {
  background: url(images/city.png) repeat-x 0 100% fixed,
  linear-gradient(to top, #5080b1, #004e8c) fixed;
  .animation(city, 30s, infinite);
}

Мы используем примесь с именем animation и передаём ей три переменные, которые подставляются в качестве параметров свойств animation и -webkit-animation. На выходе получим следующий код CSS:

body {
  background: url(images/city.png) repeat-x 0 100% fixed, 
  linear-gradient(to top, #5080b1, #004e8c) fixed;
  animation: city 30s infinite;
  -webkit-animation: city 30s infinite;
  }

Таким образом, примеси удобно использовать для свойств, которые работают в браузерах с префиксами. Это позволяет избежать ошибок при копировании значений, т. к. они заменяются компилятором автоматически.

См. также

Руководство по примесям

http://lesscss.org/features/#mixins-feature