Дополнительные возможности примесей

Для наглядности я попытался разделить базовые возможности примесей от тех, что можно считать дополнительными. Конечно, все они нужны и важны, но дополнительные возможности все таки используются не часто. Можно даже сказать, что такие возможности практически не используются в виду их специфичности и области применения.

Примеси как функции

Идеология функции заключается в том, что она должна возвращать значение, а её вызов можно использовать как выражение. В Less организована работа лишь первой части этого утверждения.

Для примера я приведу код, используемый для генерации иконки меню. Сейчас такую иконку называют «гамбургером» из-за своего внешнего вида.

.hamburger-settings(@width: 32px, @height: 3px, @gutter: 5px, @color: #000,
                    @border-radius: 0, @duration: .3s,
                    @timing-function: ease) {
  @hamburger-width: @width;
  @hamburger-height: @height;
  @hamburger-gutter: @gutter;
  @hamburger-color: @color;
  @hamburger-border-radius: @border-radius;
  @hamburger-duration: @duration;
  @hamburger-timing-function: @timing-function;
}

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

.hamburger-settings(24px, 3px, 5px, #777, @timing-function: linear);

Суть этого метода в том, чтобы дать пользователю в удобном для него виде изменять настройки библиотеки.

С помощью этого свойства примесей можно организовать настоящие математические функции, разумеется, если это необходимо.

Например, площадь треугольника, если известно основание и высота:

.areaTriangle(@a, @h) {
  @calcAreaTriangle: (0.5 * @a * @h);
}

.class {
  .areaTriangle(20, 50);
  content: @calcAreaTriangle;
}

или переводить единицы измерения:

.pxToEm(@value, @base: 16px) {
  @calcEm: (@value / @base) + 0em;
}

.class {
  .pxToEm(20px);
  content: @calcEm;
}

или найти среднее между двумя числами:

.average(@x, @y) {
  @calcAverage: ((@x + @y) / 2);
}

.class {
  .average(30px, 50px);
  padding: @calcAverage;
}

Пространство имён

Пространства имён представляют собой способ организации различных примесей. Их можно сравнить с директориями в файловой системе или с ящиками в картотеке. Проще говоря, пространства имён позволяют сортировать примеси по условным категориям и избегать конфликта их имён.

Вы можете объявить примесь внутри селектора:

.selector {
  .mixin(@color: #333) {
    color: @color;
  }
}

При этом основное свойство примеси будет сохраняться, то есть после компиляции примесь не создаст новый класс. Однако, теперь обратиться к примеси с таким объявлением напрямую не получится. Будет выдаваться ошибка.

В случае, когда указано пространство имён, необходимо указывать полный путь до примеси.

// не работает / ошибка (Error: .mixin is undefined)
.class {
  .mixin();
}

// работает (разные варианты)
.class {
  .selector > .mixin();
  .selector .mixin();
  .selector.mixin();
}

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

Ключевое слово !important

Не так давно была выпущена версия компилятора, исправляющая ошибочную работу этого ключевого слова, поэтому перед работой проверьте, что ваш компилятор имеет версию либо ниже 2.3.0, либо выше.

Основная суть функции — добавление ко всем свойствам примеси этого ключевого слова.

.mixin(@color: #333, @bg: #f5f5f5) {
  color: @color;

  .nested {
    background-color: @bg;
  }
}

.class {
  .mixin() !important;
}

После компиляции к каждому свойству будет добавлено ключевое слово !important. Причём не важно, будет ли это свойство коренного селектора, либо вложенного.

.class {
  color: #333333 !important;
}
.class .nested {
  background-color: #f5f5f5 !important;
}