Sass | At-Regeln
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; }