Охранные выражения

В Less нет @if, как в Sass. Вместо него условие пишется прямо в объявлении миксина после слова when — это охранное выражение (guard). Миксин применяется, только если условие истинно. Так стили выбираются по значению аргумента: светлый фон — тёмный текст, тёмный фон — светлый.

Условие на миксине

Опишите в styles/mixins.less два варианта миксина для текста на цветном фоне:

// styles/mixins.less
.text-on(@background) when (lightness(@background) >= 50%) {
  color: #111827;
}
 
.text-on(@background) when (lightness(@background) < 50%) {
  color: white;
}

lightness() возвращает светлоту цвета в процентах. Используйте миксин для кнопок:

// styles/components/buttons.less
.btn-warning {
  background: #facc15;
  .text-on(#facc15);
}
 
.btn-dark {
  background: #111827;
  .text-on(#111827);
}

// styles/main.less
@import "mixins";
@import "components/buttons";

.btn-warning {
  background: #facc15;
  color: #111827;
}
.btn-dark {
  background: #111827;
  color: white;
}

<style>
  .btn-warning {
    background: #facc15;
    color: #111827;
  }
  .btn-dark {
    background: #111827;
    color: white;
  }
</style>
 
<button class="btn-warning">Изменить</button>
<button class="btn-dark">Опубликовать</button>

Операторы

Проверка типа

Функции проверки типа отвечают true или false: iscolor(), isnumber(), isstring(), iskeyword(), isurl(), а для единиц — ispixel(), ispercentage(), isem() и isunit(@value, rem). С ними миксин принимает разные виды аргументов, а default() срабатывает, когда не подошёл ни один другой вариант:

// styles/main.less
.border(@value) when (iscolor(@value)) {
  border: 1px solid @value;
}
 
.border(@value) when (ispixel(@value)) {
  border: @value solid #d1d5db;
}
 
.border(@value) when (default()) {
  border: none;
}
 
.card {
  .border(#2563eb);
}
 
.panel {
  .border(2px);
}
 
.plain {
  .border(off);
}

.card {
  border: 1px solid #2563eb;
}
.panel {
  border: 2px solid #d1d5db;
}
.plain {
  border: none;
}

Условие на обычном правиле

when можно поставить и после селектора — тогда всё правило выводится только при истинном условии. Так включают и выключают части библиотеки:

// styles/main.less
@enable-shadows: true;
 
.card when (@enable-shadows = true) {
  box-shadow: 0 2px 8px #d1d5db;
}

.card {
  box-shadow: 0 2px 8px #d1d5db;
}

Поменяйте значение на false — правило .card исчезнет из CSS.

Частая ошибка

По привычке из JavaScript хочется написать «не равно» как !=. В Less такого оператора нет:

// styles/main.less
@theme: dark;
 
.page when (@theme != light) {
  background: #111827;
}

Компиляция падает с ошибкой SyntaxError: expected condition. Пишите отрицание словом: when not (@theme = light).