Вложенные правила CSS at-rules
Любое правило at-rule, тело которого содержит правила стилей, может быть вложено в другое правило стиля с помощью вложенности CSS. Правила стиля, вложенные внутри правил at-rule, берут определение вложенного селектора от ближайшего родительского правила стиля. Свойства могут быть напрямую включены внутри вложенного правила at-rule, действуя так, как будто они были вложены в & {...} блок.
Правила at-rule, которые могут быть вложены
Примеры
Вложение правила @media
В этом примере показаны три блока CSS. Первый блок демонстрирует типичное вложение правила at-rule, второй — расширенный способ записи вложения, как его анализирует браузер, а третий — эквивалент без вложенности.
Вложенный CSS
.foo {
display: grid;
@media (orientation: landscape) {
grid-auto-flow: column;
}
}
Расширенный вложенный CSS
.foo {
display: grid;
@media (orientation: landscape) {
& {
grid-auto-flow: column;
}
}
}
Эквивалент без вложенности
.foo {
display: grid;
}
@media (orientation: landscape) {
.foo {
grid-auto-flow: column;
}
}
Многократное вложение правил @media
Правила at-rule могут быть вложены друг в друга. Ниже показан пример этого и как это можно записать без вложенности.
Вложенные правила at-rules
.foo {
display: grid;
@media (orientation: landscape) {
grid-auto-flow: column;
@media (min-width: 1024px) {
max-inline-size: 1024px;
}
}
}
Эквивалент без вложенности
.foo {
display: grid;
}
@media (orientation: landscape) {
.foo {
grid-auto-flow: column;
}
}
@media (orientation: landscape) and (min-width: 1024px) {
.foo {
max-inline-size: 1024px;
}
}
Вложение уровней каскада (@layer)
Уровни каскада могут быть вложены для создания дочерних уровней. Они объединены с помощью . (точки).
Определение родительского и дочернего уровней
Мы начинаем с определения именованных уровней каскада до их использования без каких-либо назначений стилей.
@layer base {
@layer support;
}
Назначение правил уровням с вложенностью
Здесь селектор .foo назначает свои правила базовому @layer. Вложенный селектор support @layer создает подслой base.support, и вложенный селектор & используется для создания правил для селектора .foo .bar.
.foo {
@layer base {
block-size: 100%;
@layer support {
& .bar {
min-block-size: 100%;
}
}
}
}
Эквивалент без вложенности
@layer base {
.foo {
block-size: 100%;
}
}
@layer base.support {
.foo .bar {
min-block-size: 100%;
}
}
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Nesting_at-rules
