Struktur eines Stylesheets

Genau wie CSS bestehen die meisten Sass-Stylesheets hauptsächlich aus Stilregeln, die Eigenschaftsdeklarationen enthalten. Sass-Stylesheets verfügen jedoch über viele weitere Funktionen, die neben diesen bestehen können.

AnweisungenPermanenter Link zu Anweisungen

Ein Sass-Stylesheet besteht aus einer Reihe von Anweisungen, die in der Reihenfolge ausgewertet werden, um das resultierende CSS zu erstellen. Einige Anweisungen können Blöcke haben, die mit { und } definiert werden und andere Anweisungen enthalten. Beispielsweise ist eine Stilregel eine Anweisung mit einem Block. Dieser Block enthält andere Anweisungen, wie z. B. Eigenschaftsdeklarationen.

In SCSS werden Anweisungen durch Semikolons getrennt (die optional sind, wenn die Anweisung einen Block verwendet). In der eingerückten Syntax werden sie einfach durch Zeilenumbrüche getrennt.

Universelle AnweisungenPermanenter Link zu Universelle Anweisungen

Diese Arten von Anweisungen können überall in einem Sass-Stylesheet verwendet werden

CSS-AnweisungenPermanenter Link zu CSS-Anweisungen

Diese Anweisungen erzeugen CSS. Sie können überall außer innerhalb einer @function verwendet werden

  • Stilregeln, wie h1 { /* ... */ }.
  • CSS-At-Regeln, wie @media und @font-face.
  • Mixin-Verwendungen mit @include.
  • Die @at-root-Regel.

Top-Level-AnweisungenPermanenter Link zu Top-Level-Anweisungen

Diese Anweisungen können nur auf der obersten Ebene eines Stylesheets oder verschachtelt innerhalb einer CSS-Anweisung auf der obersten Ebene verwendet werden

  • Modulladungen, mit @use.
  • Importe, mit @import.
  • Mixin-Definitionen mit @mixin.
  • Funktionsdefinitionen mit @function.

Andere AnweisungenPermanenter Link zu Andere Anweisungen

  • Eigenschaftsdeklarationen wie width: 100px dürfen nur innerhalb von Stilregeln und einigen CSS-At-Regeln verwendet werden.
  • Die @extend-Regel darf nur innerhalb von Stilregeln verwendet werden.

AusdrückePermanenter Link zu Ausdrücke

Ein Ausdruck ist alles, was auf der rechten Seite einer Eigenschafts- oder Variablendeklaration steht. Jeder Ausdruck erzeugt einen Wert. Jeder gültige CSS-Eigenschaftswert ist ebenfalls ein Sass-Ausdruck, aber Sass-Ausdrücke sind weitaus leistungsfähiger als einfache CSS-Werte. Sie werden als Argumente an Mixins und Funktionen übergeben, für die Steuerung des Ablaufs mit der @if-Regel verwendet und durch Arithmetik manipuliert. Wir nennen die Ausdruckssyntax von Sass SassScript.

LiteralePermanenter Link zu Literale

Die einfachsten Ausdrücke stellen statische Werte dar

  • Zahlen, die Einheiten haben oder auch nicht, wie 12 oder 100px.
  • Zeichenketten, die Anführungszeichen haben oder auch nicht, wie "Helvetica Neue" oder bold.
  • Farben, auf die durch ihre Hex-Darstellung oder ihren Namen verwiesen werden kann, wie #c6538c oder blue.
  • Die booleschen Literale true oder false.
  • Das Singleton null.
  • Listen von Werten, die durch Leerzeichen oder Kommas getrennt sein können und in eckige Klammern oder gar keine Klammern eingeschlossen sein können, wie 1.5em 1em 0 2em, Helvetica, Arial, sans-serif oder [col1-start].
  • Maps, die Werte mit Schlüsseln assoziieren, wie ("background": red, "foreground": pink).

OperationenPermanenter Link zu Operationen

Sass definiert eine Syntax für eine Reihe von Operationen

  • == und != werden verwendet, um zu prüfen, ob zwei Werte gleich sind.
  • +, -, *, / und % haben ihre übliche mathematische Bedeutung für Zahlen, mit besonderen Verhaltensweisen für Einheiten, die der Verwendung von Einheiten in der wissenschaftlichen Mathematik entsprechen.
  • <, <=, > und >= prüfen, ob zwei Zahlen größer oder kleiner als eine andere sind.
  • and, or und not haben das übliche boolesche Verhalten. Sass betrachtet jeden Wert als "wahr" außer false und null.
  • +, - und / können verwendet werden, um Zeichenketten zu verketten.
  • ( und ) können verwendet werden, um die Rangfolge von Operationen explizit zu steuern.

Andere AusdrückePermanenter Link zu Andere Ausdrücke

  • Variablen, wie $var.
  • Funktionsaufrufe, wie nth($list, 1) oder var(--main-bg-color), die Sass-Core-Bibliotheksfunktionen oder benutzerdefinierte Funktionen aufrufen können oder die direkt zu CSS kompiliert werden können.
  • Spezialfunktionen, wie calc(1px + 100%) oder url(http://myapp.com/assets/logo.png), die ihre eigenen einzigartigen Parsing-Regeln haben.
  • Der übergeordnete Selektor, &.
  • Der Wert !important, der als unquoted String geparst wird.