Articles
Введение в SASS/SCSS
Миксины в SASS

Миксины в SASS

В этой статье объясняются миксины в SASS.

Мы объясним миксины в SASS на практических примерах.

YouTube Video

Миксины в SASS

Обзор — Что такое миксин?

Миксины — это механизм, который позволяет определять часто используемые наборы стилевых свойств как переиспользуемые функции, которые можно вызывать там, где это необходимо. Они очень полезны для соблюдения принципа DRY (Не повторяйся) в CSS классах и множественных свойствах.

Пример: самый простой миксин

Ниже приведён простой пример миксина, который переиспользует border-radius и box-shadow вместе. Вызвав этот миксин, вы можете применить одинаковый внешний вид к нескольким элементам.

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8.card {
 9  @include card-style;
10  padding: 1rem;
11}
  • С этим миксином вам больше не нужно напрямую повторять стили.
  • Его вызов требует только одной строки: @include card-style;.

Миксины с аргументами (параметрами)

Миксины могут принимать аргументы, как и функции. Это позволяет менять внешний вид по одной и той же логике. Далее приведён пример, где цвет передаётся в качестве аргумента.

 1// Mixin with parameters: accepts a color and optional radius
 2@mixin colored-box($bg-color, $radius: 4px) {
 3  background-color: $bg-color;
 4  border-radius: $radius;
 5  padding: 0.75rem;
 6}
 7
 8.box-primary {
 9  @include colored-box(#007acc);
10}
11
12.box-custom {
13  @include colored-box(#ffcc00, 12px);
14}
  • Задав значение по умолчанию, вы можете контролировать поведение при отсутствии аргумента.
  • В этом примере используется радиус по умолчанию, а изменяется только цвет фона.

Случаи использования вариативных аргументов (...)

Если нужно принимать несколько значений, можно использовать вариативные аргументы ($args...). Это удобно для генерации утилитарных классов или передачи списков запасных значений.

Это полезно, когда необходимо передать несколько семейств шрифтов или несколько значений теней.

1// Mixin that accepts variable arguments and forwards them to box-shadow
2@mixin multi-shadow($shadows...) {
3  box-shadow: $shadows;
4}
5
6.panel {
7  @include multi-shadow(0 2px 4px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.06));
8}
  • При вызове можно передавать несколько теней, разделённых запятыми.
  • Таким образом, один и тот же миксин можно использовать для простых и сложных теней.

Миксины с @content — Приём блока стилей

С помощью @content миксин может принимать блок стилей от вызывающего. Это позволяет миксину предоставить общий контейнер, а вызывающий определяет внутренние детали.

 1// Mixin that sets up a responsive container and yields to caller via @content
 2@mixin responsive-container($max-width: 1200px) {
 3  margin-left: auto;
 4  margin-right: auto;
 5  padding-left: 1rem;
 6  padding-right: 1rem;
 7  max-width: $max-width;
 8
 9  @content; // place where caller's styles are inserted
10}
11
12.header {
13  @include responsive-container(1000px) {
14    display: flex;
15    align-items: center;
16    justify-content: space-between;
17  }
18}
  • При вызове вы можете добавить блок к @include, чтобы вставить внутренние стили.
  • Данный приём полезен для обёрток макета, например сеток, карточек и форм.

Продвинутые миксины с использованием условий и циклов

Внутри миксинов можно использовать управляющие конструкции, такие как @if и @for. Их можно использовать для автоматической генерации утилит и группировки адаптивных настроек.

Ниже приведён пример автоматической генерации ширин утилитарных классов.

 1@use 'sass:math';
 2
 3// Mixin that generates width utility classes from a list of fractions
 4@mixin generate-widths($fractions) {
 5  @each $name, $fraction in $fractions {
 6    .w-#{$name} {
 7      width: math.percentage($fraction);
 8    }
 9  }
10}
11
12$widths: (
13  '1-4': 0.25,
14  '1-3': 0.3333,
15  '1-2': 0.5,
16  '3-4': 0.75
17);
18
19@include generate-widths($widths);
  • Просто передав карту нужных вам дробей на стороне вызова, вы можете автоматически сгенерировать соответствующие утилитарные классы за один раз.
  • Использование этого подхода позволяет снизить количество ручных определений стилей и сохранить согласованность вашего дизайна.

Миксины против плейсхолдеров (%placeholder)

В то время как миксины непосредственно вставляют набор свойств, плейсхолдеры используются с @extend при наследовании стилей. Миксины в некоторых случаях могут генерировать дублирующий CSS, в то время как @extend позволяет создавать более компактный CSS в определённых ситуациях.

Понимая назначения и различия сгенерированного CSS каждым методом, вы сможете выбрать наиболее оптимальный подход.

 1// Placeholder example (for comparison)
 2%btn-base {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  border-radius: 4px;
 6}
 7
 8.btn-primary {
 9  @extend %btn-base;
10  background: #007acc;
11  color: #fff;
12}
13
14.btn-secondary {
15  @extend %btn-base;
16  background: #e0e0e0;
17}
  • При использовании @extend с плейсхолдером несколько селекторов могут быть объединены в одно правило, что приведёт к более компактному CSS.
  • С другой стороны, поскольку миксины вставляют свойства непосредственно в нужном месте, они обеспечивают гибкость и помогают избежать случайного объединения селекторов.

Распространённые практические шаблоны (адаптивность, вендорные префиксы и др.)

На практике удобно выносить обработку вендорных префиксов и адаптивности в миксины. Ниже приведён пример, объединяющий transform и префиксные свойства. Такой подход централизует код для совместимости с браузерами, упрощает поддержку.

 1// Mixin for transform with vendor prefixes
 2@mixin transform($value) {
 3  -webkit-transform: $value;
 4  -ms-transform: $value;
 5  transform: $value;
 6}
 7
 8.icon-rotate {
 9  @include transform(rotate(45deg));
10}
  • Использование просто, и вы можете применять его где угодно, например: @include transform(rotate(10deg));.
  • Даже если префиксы в будущем станут не нужны, поддержка станет проще, потому что обновление миксина отразит изменения во всём вашем коде.

Практический пример: карточки и кнопки вместе

Ниже приведён пример, где стили кнопок, используемых внутри карточки, объединены в миксин, что позволяет переключать их в зависимости от цвета темы.

Это упорядочивает часто используемый шаблон «карточка + кнопка» с помощью миксинов.

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8// Mixin for transform with vendor prefixes
 9@mixin transform($value) {
10  -webkit-transform: $value;
11  -ms-transform: $value;
12  transform: $value;
13}
14
15// Button mixin with theme and size parameters
16@mixin btn($bg, $color: #fff, $padding: 0.5rem 1rem) {
17  display: inline-block;
18  padding: $padding;
19  background: $bg;
20  color: $color;
21  border-radius: 6px;
22  text-decoration: none;
23  cursor: pointer;
24  @include transform(translateY(0)); // reuse earlier transform mixin
25}
26
27// Card mixin that accepts inner button styling via @content
28@mixin card($gap: 1rem) {
29  @include card-style; // reuse earlier card-style mixin
30  padding: $gap;
31  @content;
32}
33
34.card-feature {
35  @include card {
36    .title { font-size: 1.125rem; margin-bottom: 0.5rem; }
37    .cta {
38      @include btn(#007acc);
39    }
40  }
41}
42
43.card-warning {
44  @include card {
45    .title { font-weight: bold; }
46    .cta {
47      @include btn(#ff6600);
48    }
49  }
50}
  • Используя такие миксины, компоненты можно писать более лаконично.

Обращайте внимание на производительность и размер итогового CSS

Поскольку миксины вставляют свойства при каждом вызове, чрезмерное использование @include для одних и тех же правил может привести к увеличению итогового CSS. Для оптимизации можно комбинировать их с плейсхолдерами и компонентным подходом.

Кроме того, также эффективны следующие меры.

  • Часто используемые стили следует выделять в классы для повторного использования.
  • Общие шаблоны следует группировать с помощью директивы @content.
  • Генерацию сложных утилит следует выполнять только во время сборки.

Советы для упрощения отладки

При использовании миксинов также важно разрабатывать методы, повышающие удобство отладки и сопровождаемость кода. Используя понятные имена переменных и добавляя комментарии внутри миксинов, впоследствии будет легче понимать код при его просмотре. Кроме того, если функциональность становится сложной, разделение миксина на более мелкие части упростит тестирование и повысит сопровождаемость.

Кроме того, включение source maps позволяет легко отслеживать, какой миксин сгенерировал тот или иной CSS, что облегчает выявление проблем.

Ниже приведён пример наглядного миксина с документационными комментариями.

1// Example: readable mixin with clear param names and comments
2/// Adds a subtle focus ring for accessibility
3/// $color - ring color
4/// $size - thickness of the ring
5@mixin focus-ring($color: #007acc, $size: 2px) {
6  outline: none;
7  box-shadow: 0 0 0 $size rgba(blue($color), 0.15);
8}
  • Наличие подобных структурированных документационных комментариев облегчает совместную работу и понимание кода внутри команды.
  • Поскольку документационные комментарии SASS могут автоматически извлекаться соответствующими инструментами, они также полезны для генерации документов, таких как стилистические гайды.

Резюме

Благодаря миксинам можно объединять часто используемые стили для повторного использования, что уменьшает дублирование кода и повышает удобство поддержки. Также, если несколько селекторов используют одни и те же правила, рассмотрите использование не только миксинов, но и @extend (плейсхолдеров). К тому же, хотя @content позволяет гибко разделять контейнеры и содержимое, чрезмерное использование @include может привести к раздутому итоговому CSS, поэтому следует проявлять осторожность. Важно максимально использовать аргументы, значения по умолчанию и вариативные параметры, чтобы создавать миксины, которые легко расширять и переиспользовать.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Встроенные модули SASS