Что такое mixin в SCSS?

Вопрос

Что такое mixin в SCSS и как его использовать?

Короткий ответ

@mixin — это именованный, переиспользуемый блок CSS-стилей (по аналогии с функцией), который можно параметризовать и подключить в любом селекторе через @include, чтобы не дублировать одни и те же правила.

Подробный ответ

Mixin решает проблему копипаста часто повторяющихся наборов свойств (центрирование через flex, сброс списка, медиа-запросы, вендорные префиксы). Объявляется через @mixin имя(параметры) { ... } и вызывается через @include имя(значения).

Особенности:

• Можно задавать параметры со значениями по умолчанию.
• Внутри mixin можно использовать вложенность, медиа-запросы, псевдоклассы.
• Есть специальный @content, который позволяет передать в mixin произвольный блок стилей снаружи.

Mixin отличается от @extend: @extend заставляет селекторы делиться одним и тем же CSS-правилом (объединяет селекторы в компилированном CSS), а @mixin копирует блок стилей в каждое место вызова — это гибче (можно передавать параметры), но может увеличивать итоговый размер CSS при частом использовании.

Пример

@mixin flex-center($direction: row, $gap: 0) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: $direction;
  gap: $gap;
}

@mixin respond($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

.card {
  @include flex-center(column, 16px);

  @include respond(768px) {
    flex-direction: row;
  }
}

Скомпилируется в:

.card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .card {
    flex-direction: row;
  }
}

Дополнительные вопросы

• Чем @mixin отличается от @extend и @function?
• Что делает директива @content внутри mixin?
• Как избежать дублирования итогового CSS при активном использовании mixin в большом проекте?