Descaro | regla @at-root

La regla @at-root emite todo lo que está dentro de la regla en la raíz del archivo en lugar de usar el anidamiento normal. Se utiliza principalmente durante el anidamiento avanzado con el selector principal de SassScript y las funciones de selector .

Sintaxis:

@at-root <selector> { ... }

Ejemplo:

@use "sass:selector"
  
@mixin geeks($gfg)
  @at-root #{selector.unify(&, $gfg)}
    @content
  
.block .font
  @include geeks("input")
    times new roman
  
  @include geeks("select")
    arial

Esto daría como resultado la siguiente salida:

.block input.font {
  times new roman;
}

.block select.font {
  arial;
}

La regla @at-root es necesaria en el ejemplo anterior, ya que Sass no conoce la interpolación que se usó para generar el selector mientras se realizaba el anidamiento del selector. Agrega automáticamente el selector externo al selector interno incluso si & se usa como una expresión de Sass. La regla @at le dice explícitamente a Sass que no incluya el selector externo.

Reglas de estilo:
la regla @at-root se deshace de las reglas de estilo. Solo las reglas at como @media se incluyen de forma predeterminada. Pero si es necesario, se puede controlar qué se incluye y qué no en los resultados.
Ejemplo:

@media geeks
  .gfg
    color: green
  
    @at-root (without: media)
      font-family: times new roman
  
  
    @at-root (with: rule)
      font-size: 4px

Esto daría como resultado la siguiente salida:

@media geeks {
  .gfg {
    color: green
  }
}
.gfg {
  font-family: times new roman
}
.gfg {
  font-size: 4px;
}

Junto con los nombres, también se pueden usar otros valores especiales en las consultas:

• regla significa las reglas de estilo, esto excluye todas las reglas pero conserva las reglas de estilo.
• all significa que todas las reglas-at y las reglas de estilo deben ser excluidas.