Reglas At de CSS

Sass es compatible con todas las reglas que forman parte del CSS adecuado. Para mantenerse flexible y compatible con el futuro con las próximas versiones de CSS, Sass ha brindado soporte general que cubre casi todas las reglas por sí mismo.
Sintaxis:

@<rule> <value>, @<rule> {
   ... 
}

O

@<rule> <value> {
   ... 
}

La regla siempre debe ser un identificador y el valor (si existe) puede ser cualquier cosa. Tanto las reglas como los valores pueden tener interpolación . Si alguna regla arroba de CSS está anidada dentro de una regla de estilo, ambas intercambian sus posiciones para que la regla arroba esté en el nivel superior de la salida de CSS y la regla de estilo esté dentro de ella. Esto hace que agregar estilo condicional sea fácil de agregar sin tener que volver a escribir el selector de reglas de estilo.

Ejemplo:

.gfg {
  margin: 4px;
  
  @media geeks { margin: 8px; }
}

Producción:

.gfg {
  margin: 4px;
}
@media geeks {
  .gfg {
    margin: 8px;
  }
}

Regla @media: además de permitir la interpolación, la regla @media permite usar expresiones Sass Script directamente en las consultas. Siempre que sea posible, Sass también fusiona las consultas de medios que están anidadas unas dentro de otras para facilitar la compatibilidad con navegadores que actualmente no admiten las reglas de @media anidadas.

Ejemplo:

@media (hover: hover) {
  .gfg:hover {
    border: 4px solid green;
  
    @media (color) {
      border-color: black;
    }
  }
}

Producción:

@media (hover: hover) {
  .gfg:hover {
    border: 4px solid green;
  }
}
@media (hover: hover) and (color)
{
  .gfg:hover {
    border-color: black;
  }
}

Regla @supports: la regla @supports también permite utilizar expresiones Sass Script en las consultas de declaración.
Ejemplo:

@mixin gfg {
  font-family: arial;
  @supports (font-family: geeks ) {
    font-family: geeks;
  }
}
  
.header {
  @include gfg;
}

Producción:

.header {
  font-family: arial;
}
@supports (font-family: geeks) {
  .header {
    font-family: geeks;
  }
}

Regla @keyframes: la regla @keyframes funciona como cualquier otra regla general. La única diferencia es que sus reglas secundarias deben ser algunas reglas válidas de fotogramas clave (%, desde o hasta) en lugar de selectores normales.
Ejemplo:

@keyframes font-change {
  from {
    font-family: arial;
    color: black;
  }
  
  50% {
    font-family: sans;
    color: green;
  }
  
  to {
    font-family: algerian;
    color: cyan;
  }
}

Producción:

@keyframes font-change {
  from {
    font-family: arial;
    color: black;
  }
  50% {
    font-family: sans;
    color: green;
  }
  to {
    font-family: algerian;
    color: cyan;
  }
}