• Теория
  • Теория

Примесь с условием

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

Чтобы создать условие, нужно после названия примеси поставить ключевое слово when, за которым в скобках написать условную конструкцию. Пример:

Less.mixin(@variable) when (@variable = 1) {
  // сделать что-то
}

Такая примесь применится, если «вызвать» её с параметром 1. В противном случае примесь не применится.

Less.some-class {
  .mixin(1);
}

В условной конструкции допускаются следующие операторы: >, >=, =, =<, <. Также допустимо использовать встроенные функции Less, которые возвращают конкретные значения.

К примеру, в Less есть встроенная функция lightness, которая принимает в качестве параметра значение цвета и возвращает степень его светлоты. Чёрный цвет обладает 0% светлоты, а белый — 100%. Вот пример её использования:

Less.mixin(@color) when (lightness(@color) > 50%) {
  // сделать что-то, когда цвет светлее серого
}

.mixin(@color) when (lightness(@color) = 100%) {
  // сделать что-то, когда цвет полностью белый
}

Давайте создадим примесь, которая в зависимости от цвета текста, будет задавать контрастный фоновый цвет блока. Сначала сделаем вариант со светлым текстом и тёмным фоном.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Примеси в Less» тренажёра «Инструменты автоматизации: препроцессор» можно после регистрации и оформления подписки.