Блоки содержимого: @content

Аргументы передают в миксин отдельные значения. Иногда нужно передать целый блок стилей — например, «эти объявления, но только на широких экранах». Правило @content отмечает место внутри миксина, куда этот блок вставляется.

Миксин с @content

Самый частый пример — миксин точки перелома (breakpoint). Добавьте его в styles/abstracts/_mixins.scss:

// styles/abstracts/_mixins.scss
@mixin tablet {
  @media (min-width: 768px) {
    @content;
  }
}

При подключении после имени пишут блок в фигурных скобках. Этот блок встаёт на место @content:

// styles/components/_cards.scss
@use "../abstracts/mixins";
 
.cards {
  display: grid;
  gap: 16px;
 
  @include mixins.tablet {
    grid-template-columns: 1fr 1fr;
  }
}

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

.cards {
  display: grid;
  gap: 16px;
}
@media (min-width: 768px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

Медиазапрос оказался снаружи .cards, а селектор повторился внутри него — так же, как вложенные медиазапросы в уроке о вложенности.

Точка перелома как аргумент

Отдельные миксины для каждого размера — это повторы. Передайте ширину аргументом со значением по умолчанию:

// styles/abstracts/_mixins.scss
@mixin from($width: 768px) {
  @media (min-width: $width) {
    @content;
  }
}

// styles/components/_cards.scss
@use "../abstracts/mixins";
 
.cards {
  display: grid;
  gap: 16px;
 
  @include mixins.from {
    grid-template-columns: 1fr 1fr;
  }
 
  @include mixins.from(1024px) {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

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

.cards {
  display: grid;
  gap: 16px;
}
@media (min-width: 768px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

<style>
  .cards {
    display: grid;
    gap: 16px;
  }
  @media (min-width: 768px) {
    .cards {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (min-width: 1024px) {
    .cards {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
</style>
 
<div class="cards">
  <div>Карточка 1</div>
  <div>Карточка 2</div>
  <div>Карточка 3</div>
</div>

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

Где ещё пригодится @content

@content не ограничен медиазапросами. Подойдёт любая обёртка: наведение только для устройств с мышью, селектор тёмной темы, проверка @supports:

// styles/abstracts/_mixins.scss
@mixin on-hover {
  @media (hover: hover) {
    &:hover {
      @content;
    }
  }
}

Внутри .btn запись @include mixins.on-hover { background: black; } даёт .btn:hover внутри медиазапроса, и на сенсорных экранах наведение не «залипает».

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

Если передать блок миксину без @content, Sass остановится с ошибкой Mixin doesn't accept a content block. Обратная ситуация проходит молча: миксин с @content, подключённый без блока, просто ничего туда не вставит. Если миксин точки перелома как будто не работает, проверьте, что блок в фигурных скобках действительно есть.