At-Regeln sind einfach einige CSS-Anweisungen, die das CSS anweisen, wie es sich unter bestimmten Bedingungen verhalten soll. Sie beginnen mit einem „@“ -Zeichen, gefolgt von einem Bezeichner, und enden je nach verwendeter Sass-Syntax mit einem Semikolon (bei SCSS) oder der nächsten CSS-Anweisung (bei SASS) . 

Syntax:

css

@identifier(rule);

Nachfolgend finden Sie diese Liste der verwendeten Sass-at-Regeln:

  • @use verarbeitet die Mixins, Funktionen und Variablen aus verschiedenen Sass-Stylesheets zusammen. Es kombiniert auch CSS aus verschiedenen Stylesheets in einem.
  • @forward verarbeitet ein Sass-Stylesheet und macht seine Mixins, Funktionen und Variablen für die Verwendung mit der @use-Regel verfügbar.
  • @import erweitert die CSS-at-Regel, um Styles, Mixins, Funktionen und Variablen aus anderen Stylesheets zu verarbeiten.
  • @mixin und @include machen es einfach, die Abschnitte von Stilen wieder zu verwenden.
  • @function definiert die benutzerdefinierten Funktionen, die in Sass-Ausdrücken verwendet werden sollen.
  • @extend ermöglicht Selektoren, Stile voneinander zu empfangen.
  • @at-root fügt Stile in das Stammverzeichnis des CSS-Dokuments ein.
  • @error bewirkt, dass die Kompilierung mit einer bestimmten Fehlermeldung fehlschlägt, wie im obigen Beispiel verwendet.
  • @warn gibt die Warnung aus, ohne die Kompilierung vollständig zu stoppen.
  • @debug gibt den Befehl zu Debugging-Zwecken aus.
  • Flusssteuerungsregeln wie @if, @each, @for und @while steuern die Anzahl der Ausgabe von Stilen.

Sass bietet auch ein bestimmtes Verhalten für einfache CSS-at-Regeln wie: @charset und @namespace. Sie können interpolation enthalten und in den Stilregeln verschachtelt sein. Einige von ihnen, wie @media und @supports , ermöglichen es auch, Sass direkt in den Regeln selbst zu verwenden, sogar ohne Interpolation.

Viele der zusätzlichen Funktionen von Sass kommen in Form dieser at-Regeln .

Beispielcode:

css

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

Dies würde die folgende CSS-Ausgabe ergeben:

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