@at-root
Правило @at-root
обычно записывается как @at-root <selector> { ... }
и заставляет все, что находится внутри него, выводиться в корень документа вместо использования обычного вложения. Чаще всего используется при выполнении расширенного вложения с родительским селектором SassScript и селекторные функции.
Например, предположим, что вы хотите написать селектор, который соответствует внешнему селектору и селектору элемента. Вы можете написать миксин, подобный этому, который использует функцию selector.unify()
для объединения &
с пользовательским селектором.
SCSS Syntax
@use "sass:selector";
@mixin unify-parent($child) {
@at-root #{selector.unify(&, $child)} {
@content;
}
}
.wrapper .field {
@include unify-parent("input") {
/* ... */
}
@include unify-parent("select") {
/* ... */
}
}
Sass Syntax
@use "sass:selector"
@mixin unify-parent($child)
@at-root #{selector.unify(&, $child)}
@content
.wrapper .field
@include unify-parent("input")
/* ... */
@include unify-parent("select")
/* ... */
CSS Output
.wrapper input.field {
/* ... */
}
.wrapper select.field {
/* ... */
}
Правило @at-root
здесь необходимо, потому что Sass не знает, какая интерполяция использовалась для генерации селектора при выполнении вложенности селекторов. Это означает, что он автоматически добавит внешний селектор к внутреннему селектору, даже если вы использовали &
в качестве выражения SassScript. @at-root
явно указывает Sass не включать внешний селектор.
💡 Интересный факт:
Правило @at-root
также можно записать как @at-root { ... }
, чтобы поместить несколько правил стиля в корень документа. Фактически, @at-root <selector> { ... }
- это просто сокращение от @at-root { <selector> { ... } }
!
За пределами правил стиля permalinkЗа пределами правил стиля
Сам по себе @at-root
избавляется только от правил стиля. Любые at-правила, такие как @media
или @supports
, будут оставлены. Если это не то, что вы хотите, вы можете точно контролировать, что они включают или включают, используя синтаксис, например функции медиа-запроса, записывается как @at-root (with: <rules...>) { ... }
или @at-root (without: <rules...>) { ... }
. Запрос (without: ...)
сообщает Sass, какие правила следует исключить; запрос (with: ...)
исключает все правила кроме перечисленных.
SCSS Syntax
@media print {
.page {
width: 8in;
@at-root (without: media) {
color: #111;
}
@at-root (with: rule) {
font-size: 1.2em;
}
}
}
Sass Syntax
@media print
.page
width: 8in
@at-root (without: media)
color: #111
@at-root (with: rule)
font-size: 1.2em
CSS Output
@media print {
.page {
width: 8in;
}
}
.page {
color: #111;
}
.page {
font-size: 1.2em;
}
Помимо имен at-правил, в запросах можно использовать два специальных значения:
rule
относится к правилам стиля. Например,@at-root (with: rule)
исключает все at-правила, но сохраняет правила стиля.all
относится ко всем at-rules и правила стиля должны быть исключены.