SASS `@at-root`

Este artigo explica o @at-root do SASS.

Vamos abordar tudo, desde o uso básico de @at-root até exemplos avançados, passo a passo.

YouTube Video

Sobre o @at-root do SASS

@at-root é uma diretiva fornecida pelo SASS usada para mover seletores ou propriedades aninhados do nível de aninhamento atual para o escopo pai. Aproveitando esse recurso, você pode controlar a profundidade do aninhamento e gerar o CSS pretendido de forma mais eficiente.

Uso básico de @at-root

O aninhamento do SASS torna o código mais legível, mas um aninhamento excessivamente profundo pode gerar CSS indesejado. Usando @at-root, você pode excluir blocos de código específicos da estrutura de aninhamento.

Sintaxe Básica

1@at-root {
2  // Code to be output at the parent (root) scope
3}

Exemplo de Uso

1.nav {
2  color: blue;
3  @at-root {
4    .nav-item {
5      color: red;
6    }
7  }
8}

CSS compilado

1.nav {
2  color: blue;
3}
4.nav-item {
5  color: red;
6}

• Por causa de @at-root, .nav-item é gerado fora de .nav.

@at-root em seletores aninhados

Mesmo em aninhamentos profundos, o uso de @at-root permite mover seletores específicos para o nível raiz. Isso permite gerar CSS controlado mesmo em estruturas complexas.

Exemplo de Uso

1.card {
2  background: white;
3  .card-header {
4    color: black;
5    @at-root .card-title {
6      font-size: 20px;
7    }
8  }
9}

CSS compilado

1.card {
2  background: white;
3}
4.card .card-header {
5  color: black;
6}
7.card-title {
8  font-size: 20px;
9}

• Ao usar @at-root, .card-title é gerado fora de .card-header.

@at-root com argumentos

Ao especificar argumentos, @at-root pode ser controlado com mais flexibilidade.

argumento without

Quando você usa o argumento without, a saída ignora os escopos especificados. Ou seja, você pode remover regras pai ou consultas de mídia.

Exemplo de Uso

1.nav {
2  @media (min-width: 768px) {
3    &__item {
4      @at-root (without: media) {
5        color: red;
6      }
7    }
8  }
9}

CSS compilado

1.nav__item {
2  color: red;
3}

• Neste caso, @at-root (without: media) exclui o escopo de media query, e .nav__item é gerado na raiz.

argumento with

Usar with mantém apenas os escopos especificados na saída. Útil quando você deseja gerar na raiz preservando escopos específicos.

Exemplo de Uso

 1.nav {
 2  &__item {
 3    @media (min-width: 768px) {
 4      @at-root (with: media) {
 5        &-large {
 6          font-size: 18px;
 7        }
 8      }
 9    }
10  }
11}

CSS compilado

1@media (min-width: 768px) {
2  .nav__item-large {
3    font-size: 18px;
4  }
5}

• @at-root (with: media) move o seletor para a raiz preservando a estrutura de media query.

Especificando múltiplas condições

Você também pode especificar vários escopos ao mesmo tempo, separados por espaços.

Exemplo de Uso

1.wrapper {
2  @media (min-width: 600px) {
3    @at-root (without: rule media) {
4      .global-style {
5        color: green;
6      }
7    }
8  }
9}

CSS compilado

1.global-style {
2  color: green;
3}

• Neste exemplo, tanto rule (seletores regulares) quanto media (media queries) são excluídos, portanto .global-style não pertence a nenhum escopo e é gerado inteiramente no nível raiz. Isso é útil quando você deseja definir intencionalmente estilos globais mesmo em aninhamentos complexos.

Combinando com media queries

Usando @at-root, você pode gerar estilos no nível raiz dentro de consultas de mídia. Isso permite definir o design responsivo em nível de componente.

Exemplo de Uso

1.container {
2  @media (min-width: 768px) {
3    @at-root {
4      .container-large {
5        width: 80%;
6      }
7    }
8  }
9}

CSS compilado

1.container-large {
2  width: 80%;
3}

• Usando @at-root, você também pode gerar estilos de nível raiz de dentro de media queries. Isso facilita definir estilos globais independentes para cada breakpoint.

Casos de uso de @at-root

@at-root é útil quando você quer gerar estilos no nível raiz sob condições específicas. É especialmente útil ao lidar com media queries ou estilos específicos de tema dentro de componentes.

Separando componentes e temas

Usando @at-root, você pode gerar classes globais independentes mesmo de dentro de media queries. Isso torna mais fácil organizar temas e estados por componente.

Exemplo de Uso

 1.card {
 2  background: white;
 3  color: black;
 4
 5  @media (prefers-color-scheme: dark) {
 6    @at-root (with: media) {
 7      .card-dark {
 8        background: #222;
 9        color: white;
10      }
11    }
12  }
13}

CSS compilado

 1.card {
 2  background: white;
 3  color: black;
 4}
 5
 6@media (prefers-color-scheme: dark) {
 7  .card-dark {
 8    background: #222;
 9    color: white;
10  }
11}

• Neste exemplo, ao definir estilos para o tema escuro dentro de .card, @at-root gera uma classe .card-dark separada. Isso permite alternar classes de forma flexível entre diferentes temas.

Notas

Ao usar @at-root, tenha em mente os seguintes pontos.

1. Evite o uso excessivo @at-root é poderoso, mas usá-lo em excesso pode obscurecer a intenção do seu aninhamento.

2. Deixe clara a intenção Deixar comentários sobre por que você está usando @at-root facilita o entendimento para outros desenvolvedores.

3. Esteja atento à consistência do escopo Mover a saída para a raiz pode alterar dependências de estilo. Seja claro sobre a quais elementos isso se aplica.

4. Combine com outros recursos do SASS Combinar @at-root com @mixin e @function permite um design de CSS mais flexível.

Resumo

{^ i18n_speak @at-rootは、SASSのネスト構文を補完する強力なツールです。不要なネストを解消し、構造を整理することで、より明確で再利用性の高いCSSを生成できます。スコープの理解を深め、目的に応じて使い分けることで、プロジェクト全体の可読性と保守性を高めることができます。^}

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video