Para que serve o @at-root do Sass (com exemplo prático)

Depois de muitas perguntas sobre o uso do @at-root no Sass, resolvi escrever este pequeno post para explicar de forma prática.

O @at-root serve para sair do contexto de aninhamento e levar o código para o nível superior no CSS compilado.

Exemplo

h1 {
  font-size: 16px;

  @at-root {
    header {
      margin: 0 auto;
      width: 98%;
    }
  }
}

Resultado

h1 {
  font-size: 16px;
}

header {
  margin: 0 auto;
  width: 98%;
}

Em resumo

O @at-root é útil quando você quer manter o código organizado dentro do Sass, mas precisa que parte do CSS gerado não siga o aninhamento. É uma forma elegante de controlar a estrutura final do seu arquivo CSS sem perder legibilidade no código-fonte.