Дополнительные возможности примесей¶
Для наглядности я попытался разделить базовые возможности примесей от тех, что можно считать дополнительными. Конечно, все они нужны и важны, но дополнительные возможности все таки используются не часто. Можно даже сказать, что такие возможности практически не используются в виду их специфичности и области применения.
Примеси как функции¶
Идеология функции заключается в том, что она должна возвращать значение, а её вызов можно использовать как выражение. В Less организована работа лишь первой части этого утверждения.
Для примера я приведу код, используемый для генерации иконки меню. Сейчас такую иконку называют «гамбургером» из-за своего внешнего вида.
.hamburger-settings(@width: 32px, @height: 3px, @gutter: 5px, @color: #000,
@border-radius: 0, @duration: 0.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;
}