Descaro | Reglas at

Las reglas at son simplemente algunas declaraciones de CSS que instruyen al CSS sobre cómo comportarse en condiciones particulares. Comienzan con un signo «@» , seguido de un identificador y terminan con un punto y coma (en el caso de SCSS), o la siguiente instrucción CSS (en el caso de SASS), según la sintaxis de Sass utilizada. 

Sintaxis:

@identifier(rule);

A continuación se muestra esta lista de reglas at de Sass que se utilizan:

• @use procesa los mixins, funciones y variables de diferentes hojas de estilo Sass juntas. También combina CSS de varias hojas de estilo diferentes en una sola.
• @forward procesa una hoja de estilo Sass y hace que sus combinaciones, funciones y variables estén disponibles para su uso con la regla @use.
• @import expande la regla arroba de CSS para procesar estilos, combinaciones, funciones y variables de otras hojas de estilo.
• @mixin y @include facilitan el uso de las secciones de estilos nuevamente.
• @function define las funciones personalizadas que se utilizarán en las expresiones Sass.
• @extend permite que los selectores reciban estilos entre sí.
• @at-root pone estilos en la raíz del documento CSS.
• @error hace que la compilación falle con un mensaje de error dado, como se usa en el ejemplo anterior.
• @warn imprime la advertencia sin detener por completo la compilación.
• @debug imprime el comando con fines de depuración.
• Las reglas de control de flujo como @if, @each, @for y @while controlan el número de emisiones de estilos.

Sass también proporciona cierto comportamiento para reglas simples de CSS como: @charset y @namespace. Pueden contener interpolación y se pueden anidar en las reglas de estilo. Algunos de ellos, como @media y @supports , también permiten usar Sass directamente en las propias reglas, incluso sin usar interpolación.

Gran parte de la funcionalidad adicional de Sass viene en forma de estas reglas at .

Código de ejemplo:

.error
  border: 1px green
  background-color: black
 
  &--serious
    @extend .error
    border-width: 3px

Esto daría la siguiente salida CSS:

.error, .error--serious {
  border: 1px green;
  background-color: black;
}
.error--serious {
  border-width: 3px;
}