Operatoren in SASS

Dieser Artikel erklärt die Operatoren in SASS.

Wir erklären die Operatoren in SASS anhand praktischer Beispiele.

YouTube Video

Operatoren in SASS

SASS-Operatoren umfassen numerische Operationen, Vergleichsoperationen, logische Operationen und Zeichenkettenmanipulationen.

Arithmetische Operationen (Addition, Subtraktion, Multiplikation, Division, Modulo)

SASS unterstützt Standard-Arithmetik, aber die Division / kann mit der CSS-Version verwechselt werden. Daher wird empfohlen, math.div() zu verwenden. Zahlen können Einheiten haben, und Operationen sind nur zwischen kompatiblen Einheiten möglich.

Unten finden Sie Beispiele für einfache Arithmetik und die Verwendung des math-Moduls.

 1@use "sass:math";
 2
 3$base: 16px;
 4$gutter: 8px;
 5
 6/* Addition and multiplication (allowed since both units are px) */
 7.container {
 8  width: $base + $gutter * 3; // -> 40px
 9}
10
11/* Use math.div() for division (/ is deprecated and triggers a warning) */
12.half {
13  padding: math.div($base, 2); // -> 8px
14}

• Dieser Code ist ein Beispiel für Addition und Multiplikation mit der Einheit px, sowie Division mit math.div().
• Inkompatible Einheiten wie 10px + 2em führen zu einem Fehler oder unerwarteten Ergebnissen. Einheiten vereinheitlichen oder die Funktionen unit() und unitless() verwenden.

Verarbeitung und automatische Umrechnung von Einheiten

SASS verarbeitet Zahlen mit Einheiten, und die Einheitenregeln für Berechnungsergebnisse folgen allgemeinen physikalischen Regeln. Zum Beispiel wird aus px/px eine einheitenlose Zahl. Achten Sie auf Einheitenverwaltung bei der Verwendung von unit()-Funktion oder nach math.div().

Nachfolgend finden Sie Beispiele, wie Sie Werte mit und ohne Einheit kombinieren können.

1$width: 100px;
2$ratio: 0.5;
3
4.box {
5  /* Multiply width by a ratio (multiplying by a unitless value is fine) */
6  width: $width * $ratio; // -> 50px
7}
8
9/* If you want to remove the unit, combine it with math.div() for the operation */

• Das Multiplizieren von Werten mit und ohne Einheit funktioniert wie erwartet. Seien Sie jedoch beim Dividieren vorsichtig mit der resultierenden Einheit (oder deren Fehlen).

Vergleichsoperatoren (==, !=, <, >, <=, >=)

SASS besitzt Vergleichsoperatoren, die für Verzweigungen in Bedingungen (@if) und Mixins verwendet werden können. Der Vergleich komplexer Typen wie Farben und Listen folgt eigenen Regeln. Beachten Sie, dass Farbvergleiche je nach Farbraum unterschiedlich sind.

Untenstehend ein Beispiel, das zwei Zahlen vergleicht und den Stil verzweigt.

1$breakpoint: 768px;
2
3.container {
4  @if $breakpoint >= 768px {
5    max-width: 1200px;
6  } @else {
7    max-width: 100%;
8  }
9}

• Vergleichsoperatoren können mit @if für responsive und bedingte Stilregeln kombiniert werden.

Logische Operatoren (and, or, not)

SASS unterstützt and, or und not. Verwenden Sie and / or, um mehrere Bedingungen zu kombinieren. Mit Klammern können Vorrang und Auswertungsreihenfolge explizit gemacht werden.

Nachfolgend finden Sie ein Beispiel für die Behandlung komplexer Bedingungen mit logischen Operatoren.

 1$mobile: false;
 2$logged-in: true;
 3
 4.notice {
 5  @if $logged-in and not $mobile {
 6    display: block;
 7  } @else {
 8    display: none;
 9  }
10}

• Die Vorrangregeln von and und or können mit Klammern verdeutlicht werden. Für komplexe Bedingungen helfen Klammern, die Lesbarkeit und Sicherheit zu gewährleisten.

Zeichenkettenoperationen — Verkettung und Interpolation

In SASS kann die Verkettung von Zeichenketten mit + oder mit der Interpolation #{} durchgeführt werden. Das Ergebnis des +-Operators hängt davon ab, ob die linke Zeichenkette in Anführungszeichen steht oder nicht. Daher ist die vorhersehbare Interpolation #{} sicherer.

Nachfolgend finden Sie Beispiele für Verkettung und Interpolation.

 1@use "sass:string";
 2
 3$base: "icon-";
 4$variant: string.unquote("arrow");
 5
 6.icon {
 7  /* Concatenation using + (old style) */
 8  &--old { content: $base + $variant; } // -> icon-arrow
 9
10  /* Interpolation is more reliable */
11  &--new { content: "#{$base}#{$variant}"; } // -> icon-arrow
12}
13
14/* Interpolation is useful for generating selector names, URLs, or animation names */
15@keyframes slide-#{$variant} {
16  from { transform: translateX(0); }
17  to   { transform: translateX(100%); }
18}

• Mit der Interpolation #{} vermeiden Sie Probleme mit Anführungszeichen und unbeabsichtigtem Einfügen von Leerzeichen.

Farbarithmetik (veraltet)

Früher unterstützte SASS die 'Farb-Arithmetik', die es erlaubte, Zahlen zu Farben hinzuzufügen oder von ihnen zu subtrahieren. Diese Funktion ist jedoch veraltet – Sie sollten stattdessen Funktionen aus dem sass:color-Modul verwenden, um Farben zu manipulieren.

Nachfolgend finden Sie Beispiele, die zeigen, dass direkte Farbarithmetik veraltet ist und Alternativen vorschlagen.

 1/* Deprecated (old code example – no longer works or recommended) */
 2/* background: $base-color + 10; */
 3
 4@use "sass:color";
 5
 6$base: #336699;
 7
 8.bg {
 9  /* For example, to increase lightness, use color.scale() or color.adjust() */
10  /* Safe manipulation based on color space */
11  background: color.scale($base, $lightness: 20%);
12  /* Or make it lighter by mixing white */
13  background: color.mix(white, $base, 20%);
14}

• Wenn Sie Farben manipulieren möchten, verwenden Sie Funktionen aus dem sass:color-Modul.

Klammern und Operatorvorrang

Verwenden Sie Klammern, um die Auswertungsreihenfolge bei Operationen zu steuern. Klammern werden immer vor den außerhalb stehenden Operatoren ausgewertet. Verwenden Sie Klammern in komplexen Ausdrücken, um die Lesbarkeit zu gewährleisten.

Nachfolgend finden Sie Beispiele, wie die Auswertungsreihenfolge mit Klammern verdeutlicht werden kann.

1@debug (1 + 2) * 3; // 9
2@debug 1 + 2 * 3;   // 7 (multiplication first)

• Wie in der Mathematik gelten Vorrangregeln, daher sollten Sie Klammern verwenden, um die gewünschte Reihenfolge der Berechnungen sicherzustellen.

Zusammenfassung

Beim Einsatz von Operatoren in SASS ist es wichtig, den Code im Hinblick auf zukünftige Kompatibilität und Lesbarkeit zu schreiben. In komplexen Ausdrücken sollte die Reihenfolge der Berechnungen durch Klammern verdeutlicht und die Lesbarkeit des Codes vorrangig behandelt werden.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video