Миксины

Миксин — это именованная группа объявлений, которую можно вставить куда угодно. Вы описываете её один раз через @mixin и подключаете через @include. Миксины убирают повторы: те же пять строк для центрирования или для стиля кнопки живут в одном месте.

Простой миксин

Миксины хранят в styles/abstracts/_mixins.scss. Создайте миксин, который центрирует содержимое flex-контейнера:

// styles/abstracts/_mixins.scss
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

// styles/components/_badges.scss
@use "../abstracts/mixins";
 
.badge {
  width: 32px;
  height: 32px;
  @include mixins.flex-center;
}

// styles/main.scss
@use "components/badges";

.badge {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Объявления миксина скопированы в .badge. Сам по себе миксин ничего не выводит, пока его не подключат.

Аргументы

Миксин может принимать аргументы — значения, которые меняются от вызова к вызову. Они перечисляются в скобках, как переменные:

// styles/abstracts/_mixins.scss
@mixin button-variant($background, $color) {
  color: $color;
  background: $background;
}

// styles/components/_buttons.scss
@use "../abstracts/mixins";
 
.btn-primary {
  @include mixins.button-variant(#2563eb, white);
}
 
.btn-warning {
  @include mixins.button-variant(#facc15, black);
}

// styles/main.scss
@use "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/abstracts/_mixins.scss
@mixin button-variant($background, $color: white) {
  color: $color;
  background: $background;
}

Теперь @include mixins.button-variant(#2563eb); даёт белый текст, а @include mixins.button-variant(#facc15, black); — по-прежнему чёрный. Аргументы со значениями по умолчанию идут после обязательных.

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

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

// styles/components/_buttons.scss
@use "../abstracts/mixins";
 
.btn-dark {
  @include mixins.button-variant($color: white, $background: #111827);
}

// styles/main.scss
@use "components/buttons";

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

Миксин или класс

Миксин копирует свои объявления в каждое правило, которое его подключает. Для трёх коротких строк это нормально. Для большого блока, подключённого в пятидесяти местах, CSS заметно растёт — тогда часто лучше общий класс в HTML, например class="btn btn-primary".

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

Миксин с обязательным аргументом нельзя вызвать без него. @include mixins.button-variant; останавливает компиляцию с ошибкой Missing argument $background. Либо передайте значение, либо задайте аргументу значение по умолчанию.