Сдерживатели примесей в Less
Сдерживатели нужны, когда вы хотите, чтобы было соответствие с выражениями, а не с обычными значениями арности.
Если вам знакомо функциональное программирование, вы, вероятно, уже с ними сталкивались.
Пытаясь оставаться как можно ближе к декларативной природе CSS, Less выбрал применение условного выполнения через защищенные примеси вместо операторов if
/else
в духе спецификации запросов @media
.Рассмотрим пример:
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
Ключевое слово - when
, которое представляет последовательность сдерживателей (здесь только с одним). Теперь запустим следующий код:
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
И вот, что получим:
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}
Операторы сравнения сдерживателей
Полный список операторов, используемых в сдерживателях: >
, >=
, =
, =<
, <
. Также, ключевое слово true
является единственным истинным значением, которое делает эти две примеси равными:
.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }
Любое значение, кроме ключевого слова true
является ложным:
.class {
.truth(40); // Не подходит ни под одно из
// определений, указанных выше.
}
Обратите внимание, что вы также можете сравнивать аргументы друг с другом, или с неаргументами:
@media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }
.max (@a; @b) when (@a > @b) { width: @a }
.max (@a; @b) when (@a < @b) { width: @b }
Сдерживатели логических операторов
Вы можете использовать логические операторы со сдерживателями. Синтаксис основан на медиа-запросах CSS. Используйте ключевое слово and
, чтобы объединить сдерживатели:
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
Вы можете воспроизвести оператор or, разделив сдерживатели запятой. Если один из них имеет значение true (истина), у вас есть схожесть:
.mixin (@a) when (@a > 10), (@a < -10) { ... }
Используйте ключевое слово not
, чтобы отвергнуть условия:
.mixin (@b) when not (@b > 0) { ... }
Функция проверки типа
Наконец, если хотите, чтобы примеси сходились на типе значения, можете использовать функции is
:
.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
.mixin (@a; @b: black) when (iscolor(@b)) { ... }
Вот список основных функций проверки типа:
iscolor
isnumber
isstring
iskeyword
isurl
Если вы хотите проверить, является ли значение специфической единицей, а не только числом, можете использовать одну из этих команд:
ispixel
ispercentage
isem
isunit
Условные примеси
В добавок, функция default может быть использована, чтобы примеси сходились в зависимости от схожести остальных, а вы могли использовать их для создания «условных примесей», подобных операторам else
, или default
(или структур if
и case
соответственно):
.mixin (@a) when (@a > 0) { ... }
// сходится только если первая примесь
// не сходится, т.е. когда @a <= 0
.mixin (@a) when (default()) { ... }