@at-root
A regra @at-root
é normalmente escrita como @at-root <selector> { ... }
e causa que tudo dentro dela seja emitido na raiz do documento ao lugar de usar o encaixamento normal. É usada com mais frequência quando faz-se encaixamento avançado com o seletor de pai e funções de seletor da SassScript.
Por exemplo, suponhamos que queres escrever um seletor que combina com o seletor externo e um seletor de elemento. Tu poderias escrever uma mistura como esta que usa a função selector.unify()
para combinar &
com um seletor do utilizador:
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 {
/* ... */
}
A regra @at-root
é necessária neste contexto porque a Sass não sabe qual interpolação foi usada para gerar um seletor quando está a realizar encaixamento de seletor. Isto significa que adicionará automaticamente o seletor externo ao seletor interno mesmo se usaste &
como uma expressão de SassScript. A regra @at-root
diz explicitamente a Sass para não incluir o seletor externo.
💡 Fato Divertido:
A regra @at-root
também pode ser escrita como @at-root { ... }
para colocar várias regras de estilo na raiz do documento. De fato, @at-root <selector> { ... }
é apenas uma estenografia para @at-root { <selector> { ... } }
!
Além das Regras de EstiloAlém das Regras de Estilo permalink
Por si mesma, a @at-root
apenas livra-se das regras de estilo. Quaisquer regras de arroba como @media
ou @supports
serão deixadas. Se isto não for o que quiseres, podes controlar exatamente qual incluir ou excluir usando sintaxe como as funcionalidades de consulta de media, escrita como @at-root (with: <rules...>) { ... }
ou @at-root (without: <rules...>) { ... }
. A consulta (without: ...)
diz a Sass que as regras deveriam ser excluídas; a consulta (with: ...)
exclui todas as regras exceto aquelas que são listas:
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;
}
Além dos nomes das regras de arroba, existem dois valores especiais que podem ser usados nas consultas:
-
rule
refere-se às regras de estilo. Por exemplo,@at-root (with: rule)
exclui todas as regras de arroba mas preserva as regras de estilo. -
all
refere-se a todas as regras de arrobas e regras de estilo que deveriam ser excluídas.