- Теория
- Теория
Примесь с условием
В примесях можно использовать полноценные условия, которые могут изменять поведение примеси в зависимости от значений входных параметров.
Чтобы создать условие, нужно после названия примеси поставить ключевое слово 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
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.