Миксины с параметрами

Миксин становится по-настоящему полезным, когда принимает параметры — значения, которые меняются от вызова к вызову. Параметры перечисляются в скобках как переменные: .button-variant(@background; @color). Так из одного миксина получаются синяя, жёлтая и красная кнопки.

Параметры

Опишите миксин в styles/mixins.less:

// styles/mixins.less
.button-variant(@background; @color) {
  color: @color;
  background: @background;
}

И вызовите его с разными значениями в styles/components/buttons.less:

// styles/components/buttons.less
.btn-primary {
  .button-variant(#2563eb; white);
}
 
.btn-warning {
  .button-variant(#facc15; black);
}

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

.btn-primary {
  color: white;
  background: #2563eb;
}
.btn-warning {
  color: black;
  background: #facc15;
}

<style>
  .btn-primary {
    color: white;
    background: #2563eb;
  }
  .btn-warning {
    color: black;
    background: #facc15;
  }
</style>
 
<button class="btn-primary">Сохранить</button>
<button class="btn-warning">Удалить</button>

Точка с запятой или запятая

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

// styles/main.less
.font(@family; @size) {
  font-family: @family;
  font-size: @size;
}
 
.title {
  .font(Georgia, serif; 24px);
}

.title {
  font-family: Georgia, serif;
  font-size: 24px;
}

Georgia, serif целиком попал в первый параметр, потому что разделителем была точка с запятой.

Значения по умолчанию

Параметр может иметь значение по умолчанию — тогда его можно не передавать:

// styles/mixins.less
.button-variant(@background; @color: white) {
  color: @color;
  background: @background;
}

Теперь .button-variant(#2563eb); даёт белый текст, а .button-variant(#facc15; black); — по-прежнему чёрный.

Именованные аргументы

Аргументы можно передавать по имени — порядок тогда не важен, а вызов читается без заглядывания в миксин:

// styles/main.less
.button-variant(@background; @color: white) {
  color: @color;
  background: @background;
}
 
.btn-dark {
  .button-variant(@color: #f9fafb; @background: #111827);
}

.btn-dark {
  color: #f9fafb;
  background: #111827;
}

Все аргументы сразу

Внутри миксина переменная @arguments содержит все переданные значения через пробел. Это удобно для свойств-сокращений:

// styles/main.less
.shadow(@x; @y; @blur; @color) {
  box-shadow: @arguments;
}
 
.card {
  .shadow(0; 2px; 8px; #d1d5db);
}

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

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

Миксин с обязательным параметром нельзя вызвать без аргумента. Вызов .button-variant(); останавливает компиляцию с ошибкой No matching definition was found for .button-variant(). Передайте значение или задайте параметру значение по умолчанию.