Какая директива в CSS позволяет вставлять новые свойства внутрь миксина при вызове

Что проверяют

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

Как отвечать

Правильный ответ: @content. Это место в теле миксина, куда подставляется блок стилей, переданный в фигурных скобках при вызове через @include.

@mixin tablet {
  @media (min-width: 768px) {
    @content;
  }
}

.card {
  padding: 16px;
  @include tablet {
    padding: 24px;
  }
}

Что стоит добавить:

• зачем: миксин задаёт обёртку (медиазапрос, :hover, @supports, селектор темы), а свойства решает место вызова. Параметром блок стилей не передашь;
• область видимости: блок видит переменные места вызова, а не локальные переменные миксина. Передать значение внутрь блока можно аргументами: @content(...) в миксине и using (...) при вызове;
• повторы: @content можно вставить несколько раз или ни разу, блок подставится столько раз, сколько написано;
• другие препроцессоры: в Less похожую роль играют detached rulesets, в Stylus блочные миксины с {block}.

Попутно: в современном Sass модули подключают через @use, а @import объявлен устаревшим.

Где спотыкаются

Называют @include. Он только вызывает миксин, а свойства, дописанные после него в том же правиле, к миксину не относятся и внутрь не вставляются.

Путают @content с @extend. @extend объединяет селекторы, не работает через границу медиазапроса и может раздуть CSS неожиданными комбинациями.

Используют внутри блока локальную переменную миксина и удивляются ошибке компиляции. Значение из миксина попадает в блок только через using.