Расширение и селекторы-заполнители
Обменивайтесь стилями между селекторами с помощью @extend и невидимых селекторов-заполнителей.
«Расширение и селекторы-заполнители» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
@extend в Sass
@extend позволяет одному селектору унаследовать все стили другого. Вместо дублирования кода эта директива создаёт общий набор правил в скомпилированном CSS.
<div class="error">Error message</div>
<div class="critical-error">Critical error message</div>
Селекторы-заполнители
Селектор-заполнитель (с префиксом %) определяет блок стилей, который никогда не компилируется сам по себе — только при расширении. Он не создаёт CSS, пока его кто-либо не расширит.
<div class="product-card">Product card</div>
<div class="profile-card">Profile card</div>
Почему заполнители лучше классов
Расширение настоящего класса добавляет в скомпилированный результат весь контекст селектора этого класса. Заполнители чище: они выводят сгруппированные селекторы только для селекторов, которые их расширяют.
Результат компиляции @extend
Когда несколько селекторов расширяют один и тот же заполнитель, Sass объединяет их в правило с разделёнными запятыми селекторами:
<div class="product-card">Product card</div>
<div class="profile-card">Profile card</div>
Подводные камни @extend
У @extend есть существенные ограничения:
- Его нельзя использовать внутри медиазапросов
- При цепочках расширений могут появляться неожиданные большие группы селекторов
- Скомпилированный CSS становится сложнее сопоставить с исходными файлами
Компромиссы @extend и примесей
Сравнение:
@extend: меньший объём CSS (общие правила), но сложные цепочки селекторов и ограничения в медиазапросах@mixin: дублирует объявления, но работает предсказуемее и может использоваться внутри медиазапросов
Обычно лучше использовать примеси
В современной практике Sass обычно предпочитают примеси вместо @extend. HTTP/2 и сжатие gzip делают дублирование объявлений менее важным, а удобство отладки примесей перевешивает минимальную разницу в размере CSS.
Когда уместен @extend
@extend (с заполнителями) уместен, когда:
- Несколько селекторов действительно имеют одно и то же смысловое состояние (например, состояния ошибки)
- Вы находитесь не внутри медиазапроса
- Базовые стили стабильны и чётко определены
Заполнители и настройка темы
Заполнители хорошо подходят для наборов утилит, похожих на сброс стилей, которые наследуются несколькими компонентами:
<a href="#" class="skip-link">Skip to content</a>
<span class="sr-label">Screen reader label</span>
Соображения об устаревании
Некоторые руководства по стилю и команды полностью запрещают @extend из-за его сложности и разрастания селекторов, к которому он может привести. Учитывайте компромиссы и следуйте правилам своей команды.
Быстрая проверка
Чем отличается расширение обычного класса от расширения селектора-заполнителя (%)?
Итоги
@extend позволяет селектору унаследовать стили другого селектора, группируя селекторы в скомпилированном CSS. Заполнители (%name) ничего не компилируют, пока их не расширят, поэтому они чище обычных классов. Избегайте @extend внутри медиазапросов. В современном Sass примеси обычно предпочтительнее @extend благодаря предсказуемости и удобству отладки.
Часто задаваемые вопросы
Урок «Расширение и селекторы-заполнители» бесплатный?
Да — полный текст урока «Расширение и селекторы-заполнители» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Расширение и селекторы-заполнители»?
Обменивайтесь стилями между селекторами с помощью @extend и невидимых селекторов-заполнителей. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Расширение и селекторы-заполнители»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Вложенность переменных и частичные файлы
- Миксины и включения
- Расширение и селекторы-заполнители
- Функции Sass и поток управления