Как расширить миксин с помощью директивы content в CSS

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

Знаете ли вы, как в Sass передать в миксин целый блок стилей, и не путаете ли это с CSS-свойством content. Следом спрашивают, какие переменные видны внутри такого блока и как передать в него аргументы.

Как отвечать

Первым делом уточните терминологию: в чистом CSS миксинов нет, речь о Sass (в Less похожую роль играют detached rulesets). Директива @content внутри @mixin отмечает место, куда подставится блок, переданный при @include.

Классический пример это медиазапросы: @mixin from($bp) { @media (min-width: $bp) { @content; } } и вызов .card { @include from(768px) { padding: 24px; } }. Миксин задаёт обёртку, а содержимое каждый раз своё.

Что ещё стоит сказать:

• область видимости: блок вычисляется там, где написан @include, а не внутри миксина. Локальные переменные миксина в нём не видны;
• аргументы блока: миксин может вызвать @content($value), а вызывающий принимает значение через @include theme using ($color) { ... }. Так делают темы и наборы брейкпоинтов;
• несколько вызовов: @content можно поставить в миксине несколько раз, блок продублируется в каждом месте;
• проверка наличия: meta.content-exists() из модуля sass:meta позволяет сделать блок необязательным;
• модули: в современном Dart Sass миксины подключают через @use, @import объявлен устаревшим, и вызов выглядит как @include mq.from(768px) { ... }.

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

Отвечают про псевдоэлементы ::before и свойство content: ''. Это другая вещь, и интервьюер сразу понимает, что с @content вы не работали.

Ждут, что внутри блока доступна переменная, объявленная в миксине. Для этого и существует using, без него будет ошибка неизвестной переменной.

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