Урок 45 из 53 · 11 мин

Вложенность, @layer и @scope

Нативная вложенность с &, каскадные слои @layer и область @scope.

Наводим порядок

Лев
Раньше для вложенности ставили препроцессоры. Теперь браузер умеет сам.
Бро
И ещё @layer: сброс, база, компоненты — и больше никаких войн специфичности.

Селектор

&

Вложенность

Что это: Правила внутри правил: .card { & h3 { … } &:hover { … } }. & — это родитель.
Зачем: Стили компонента в одном блоке.
Как: HTML
<style> .card { padding: 8px; background: #fdf6ec; & b { color: #c8763a; } &:hover { background: #fbe7d3; } } </style> <div class="card"><b>Ручка</b> — наведи</div>
Так это выглядит

@-правило

@layer

Каскадные слои

Что это: @layer reset, base, components; — слой позже в списке побеждает, независимо от специфичности.
Зачем: Предсказуемый каскад в большом проекте.
Как: HTML
<style> @layer base, components; @layer components { .btn { background: #c8763a; color: white; } } @layer base { button { background: #ddd; } } </style> <button class="btn">Слой components победил</button>
Так это выглядит

@-правило

@scope

Область стилей

Что это: @scope (.card) { img { … } } — правила работают только внутри .card.
Зачем: Стили компонента не протекают наружу.

Ника
Слои решают порядок, вложенность — читаемость, @scope — границы.

Ваш ход

Задание

Вложенная карточка

Внутри правила .card вложи &:hover с background-color: #fbe7d3.

Наведение описано вложенно — пока нет
Использован & — пока нет

<style>
.card { padding: 16px; background-color: #fffaf3; }
</style>
<article class="card">Ручка</article>

<style>
.card { padding: 16px; background-color: #fffaf3; }
</style>
<article class="card">Ручка</article>

Результат обновляется при вводе

Задание

Слой компонентов

Внутри @layer components задай .btn background-color: #c8763a.

Кнопка в слое components — пока нет

<style>
@layer base, components;
@layer base { button { background-color: #ddd; } }
</style>
<button class="btn">Заказать</button>

<style>
@layer base, components;
@layer base { button { background-color: #ddd; } }
</style>
<button class="btn">Заказать</button>

Результат обновляется при вводе

ПрактикаОбязательное задание

&

Выберите один ответ.

Что означает & во вложенном правиле?

Домашнее заданиеДля закрепления

Слои