Para que serve o @at-root do SASS?

Depois de muitas perguntas sobre para que serve o @at-root do sass, resolvi escrever esse pequeno post para explicar.

O @at-root funciona pra ‘saltar’ de local que aninhou em seu Sass para um nível superior.

Exemplo:

h1 {
  font-size: 16px;
  @at-root {
    header {
      margin: 0 auto;
      width: 98%;
    }
  }
}

Resultado:

h1 {
  font-size: 16px;
}
header {
  margin: 0 auto;
  width: 98%;
}