Operatoren

Sass unterstützt eine Handvoll nützlicher Operatoren für die Arbeit mit verschiedenen Werten. Dazu gehören die Standard-mathematischen Operatoren wie + und * sowie Operatoren für verschiedene andere Typen.

  • == und != werden verwendet, um zu überprüfen, ob zwei Werte gleich sind.
  • +, -, *, / und % haben ihre übliche mathematische Bedeutung für Zahlen, mit besonderem Verhalten für Einheiten, das der Verwendung von Einheiten in der wissenschaftlichen Mathematik entspricht.
  • <, <=, > und >= überprüfen, ob zwei Zahlen größer oder kleiner als eine andere sind.
  • and, or und not verhalten sich wie üblich in der booleschen Logik. Sass betrachtet jeden Wert als "wahr" außer false und null.
  • +, - und / können verwendet werden, um Zeichenketten zu verketten .

⚠️ Vorsicht!

Schon früh in der Geschichte von Sass wurde die Unterstützung für mathematische Operationen auf Farben hinzugefügt. Diese Operationen wurden separat auf jeden der RGB-Kanäle der Farben angewendet, sodass die Addition zweier Farben eine Farbe ergab, deren roter Kanal die Summe ihrer roten Kanäle war und so weiter.

Dieses Verhalten war nicht sehr nützlich, da die kanalweise RGB-Arithmetik nicht gut widerspiegelte, wie Menschen Farben wahrnehmen. Farbfunktionen wurden hinzugefügt, die weitaus nützlicher sind, und Farboperationen wurden als veraltet eingestuft. Sie werden in LibSass und Ruby Sass noch unterstützt, aber sie lösen Warnungen aus und Benutzern wird dringend davon abgeraten, sie zu verwenden .

AusführungsreihenfolgeAusführungsreihenfolge  Permalink

Sass hat eine ziemlich standardmäßige Ausführungsreihenfolge, von der engsten zur lockersten.

  1. Die unären Operatoren not, +, - und /.
  2. Die *, / und % Operatoren.
  3. Die + und - Operatoren.
  4. Die >, >=, < und <= Operatoren.
  5. Die == und != Operatoren.
  6. Der and Operator.
  7. Der or Operator.
  8. Der = Operator, wenn er verfügbar ist.
Spielplatz

SCSS-Syntax

@debug 1 + 2 * 3 == 1 + (2 * 3); // true
@debug true or false and false == true or (false and false); // true
Spielplatz

Sass-Syntax

@debug 1 + 2 * 3 == 1 + (2 * 3)  // true
@debug true or false and false == true or (false and false)  // true

KlammernKlammern Permalink

Sie können die Ausführungsreihenfolge explizit mit Klammern steuern. Eine Operation in Klammern wird immer vor allen Operationen außerhalb von ihnen ausgewertet. Klammern können sogar verschachtelt sein, in diesem Fall werden die innersten Klammern zuerst ausgewertet .

Spielplatz

SCSS-Syntax

@debug (1 + 2) * 3; // 9
@debug ((1 + 2) * 3 + 4) * 5; // 65
Spielplatz

Sass-Syntax

@debug (1 + 2) * 3  // 9
@debug ((1 + 2) * 3 + 4) * 5  // 65

Einzelnes GleichheitszeichenEinzelnes Gleichheitszeichen Permalink

Sass unterstützt einen speziellen = Operator, der nur in Funktionsargumenten erlaubt ist und einfach eine nicht zitierte Zeichenkette mit seinen beiden Operanden, getrennt durch =, erstellt. Dies existiert aus Gründen der Abwärtskompatibilität mit sehr altem, nur für IE geltendem Code.

Spielplatz

SCSS-Syntax

.transparent-blue {
  filter: chroma(color=#0000ff);
}
Spielplatz

Sass-Syntax

.transparent-blue
  filter: chroma(color=#0000ff)

CSS-Ausgabe

.transparent-blue {
  filter: chroma(color=#0000ff);
}