@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") {
    /* ... */
  }
}

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;
    }
  }
}

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.