Сопоставление с образцом

В Less можно объявить несколько миксинов с одним именем. При вызове Less сравнивает аргументы с объявлениями и применяет все подходящие. Это называется сопоставлением с образцом (pattern matching). Так один вызов выбирает нужный вариант стилей без условий.

Выбор по значению

Вместо имени параметра в объявлении можно написать конкретное значение. Тогда миксин подходит только для вызова с этим значением. Опишите варианты сообщения в styles/mixins.less:

// styles/mixins.less
.alert(success) {
  color: #166534;
  background: #dcfce7;
}
 
.alert(danger) {
  color: #991b1b;
  background: #fee2e2;
}
 
.alert(@_) {
  padding: 12px 16px;
  border-radius: 8px;
}

@_ — параметр, имя которого не важно: он подходит для любого значения. Поэтому общие стили применяются всегда. Вызовите миксин:

// styles/components/alerts.less
.alert-success {
  .alert(success);
}
 
.alert-danger {
  .alert(danger);
}

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

.alert-success {
  color: #166534;
  background: #dcfce7;
  padding: 12px 16px;
  border-radius: 8px;
}
.alert-danger {
  color: #991b1b;
  background: #fee2e2;
  padding: 12px 16px;
  border-radius: 8px;
}

<style>
  .alert-success {
    color: #166534;
    background: #dcfce7;
    padding: 12px 16px;
    border-radius: 8px;
  }
  .alert-danger {
    color: #991b1b;
    background: #fee2e2;
    padding: 12px 16px;
    border-radius: 8px;
  }
</style>
 
<div class="alert-success">Пост опубликован.</div>
<div class="alert-danger" style="margin-top: 8px">Не удалось сохранить пост.</div>

Каждый класс получил свои цвета и общие отступы из .alert(@_).

Выбор по числу аргументов

Миксины с одним именем различаются и количеством параметров. Less выберет тот, которому подходит число переданных значений:

// styles/main.less
.size(@side) {
  width: @side;
  height: @side;
}
 
.size(@width; @height) {
  width: @width;
  height: @height;
}
 
.avatar {
  .size(48px);
}
 
.banner {
  .size(100%; 240px);
}

.avatar {
  width: 48px;
  height: 48px;
}
.banner {
  width: 100%;
  height: 240px;
}

Переменное число аргументов

Многоточие после имени параметра собирает все оставшиеся аргументы в одну переменную. Так пишут миксины для свойств, которые принимают список, например несколько теней:

// styles/main.less
.shadows(@list...) {
  box-shadow: @list;
}
 
.card {
  .shadows(0 1px 2px #d1d5db, 0 4px 12px #e5e7eb;);
}

.card {
  box-shadow: 0 1px 2px #d1d5db, 0 4px 12px #e5e7eb;
}

Точка с запятой в конце вызова говорит Less: запятые внутри — это часть значения, а не разделители аргументов.

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

Без завершающей точки с запятой Less считает каждую тень отдельным аргументом и склеивает их пробелом:

// styles/main.less
.shadows(@list...) {
  box-shadow: @list;
}
 
.card {
  .shadows(0 1px 2px #d1d5db, 0 4px 12px #e5e7eb);
}

.card {
  box-shadow: 0 1px 2px #d1d5db 0 4px 12px #e5e7eb;
}

Запятая пропала, и браузер отбросит неверное значение box-shadow. Когда передаёте значение со списком через запятую, ставьте ; в конце вызова.