Gleichheitsoperatoren

Kompatibilität (Einheitenlose Gleichheit)
Dart Sass
✓
LibSass
✗
Ruby Sass
seit 4.0.0 (unveröffentlicht)

LibSass und ältere Versionen von Ruby Sass betrachten Zahlen ohne Einheiten als gleich wie die gleichen Zahlen mit beliebigen Einheiten. Dieses Verhalten wurde als veraltet markiert und in neueren Versionen entfernt, da es die Transitivität verletzt.

Die Gleichheitsoperatoren geben zurück, ob zwei Werte gleich sind oder nicht. Sie werden geschrieben als <Ausdruck> == <Ausdruck>, was zurückgibt, ob zwei Ausdrücke gleich sind, und <Ausdruck> != <Ausdruck>, was zurückgibt, ob zwei Ausdrücke nicht gleich sind. Zwei Werte gelten als gleich, wenn sie denselben Typ und denselben Wert haben, was für verschiedene Typen unterschiedliche Bedeutungen hat.

  • Zahlen sind gleich, wenn sie denselben Wert und dieselben Einheiten haben oder wenn ihre Werte gleich sind, wenn ihre Einheiten zwischeneinander konvertiert werden.
  • Zeichenketten sind ungewöhnlich, da nicht angeführte und angeführte Zeichenketten mit demselben Inhalt als gleich gelten.
  • Farben sind gleich, wenn sie sich im selben Farbraum befinden und dieselben Kanalwerte haben, oder wenn sie sich beide in veralteten Farbräumen befinden und dieselben RGBA-Kanalwerte haben.
  • Listen sind gleich, wenn ihr Inhalt gleich ist. Komma-separierte Listen sind nicht gleich mit Leerzeichen-separierten Listen, und geklammerte Listen sind nicht gleich mit nicht geklammerten Listen.
  • Maps sind gleich, wenn ihre Schlüssel und Werte beide gleich sind.
  • Berechnungen sind gleich, wenn ihre Namen und Argumente alle gleich sind. Operationsargumente werden textuell verglichen.
  • true, false und null sind nur mit sich selbst gleich.
  • Funktionen sind mit derselben Funktion gleich. Funktionen werden referenziell verglichen, daher gelten sie als unterschiedlich, auch wenn zwei Funktionen denselben Namen und dieselbe Definition haben, wenn sie nicht am selben Ort definiert sind.
Spielplatz

SCSS-Syntax

@debug 1px == 1px; // true
@debug 1px != 1em; // true
@debug 1 != 1px; // true
@debug 96px == 1in; // true

@debug "Helvetica" == Helvetica; // true
@debug "Helvetica" != "Arial"; // true

@debug hsl(34, 35%, 92.1%) == #f2ece4; // true
@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8); // true

@debug (5px 7px 10px) == (5px 7px 10px); // true
@debug (5px 7px 10px) != (10px 14px 20px); // true
@debug (5px 7px 10px) != (5px, 7px, 10px); // true
@debug (5px 7px 10px) != [5px 7px 10px]; // true

$theme: ("venus": #998099, "nebula": #d2e1dd);
@debug $theme == ("venus": #998099, "nebula": #d2e1dd); // true
@debug $theme != ("venus": #998099, "iron": #dadbdf); // true

@debug true == true; // true
@debug true != false; // true
@debug null != false; // true

@debug get-function("rgba") == get-function("rgba"); // true
@debug get-function("rgba") != get-function("hsla"); // true
Spielplatz

Sass-Syntax

@debug 1px == 1px  // true
@debug 1px != 1em  // true
@debug 1 != 1px  // true
@debug 96px == 1in  // true

@debug "Helvetica" == Helvetica  // true
@debug "Helvetica" != "Arial"  // true

@debug hsl(34, 35%, 92.1%) == #f2ece4  // true
@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8)  // true

@debug (5px 7px 10px) == (5px 7px 10px)  // true
@debug (5px 7px 10px) != (10px 14px 20px)  // true
@debug (5px 7px 10px) != (5px, 7px, 10px)  // true
@debug (5px 7px 10px) != [5px 7px 10px]  // true

$theme: ("venus": #998099, "nebula": #d2e1dd)
@debug $theme == ("venus": #998099, "nebula": #d2e1dd)  // true
@debug $theme != ("venus": #998099, "iron": #dadbdf)  // true

@debug calc(10px + 10%) == calc(10px + 10%)  // true
@debug calc(10% + 10px) == calc(10px + 10%)  // false

@debug true == true  // true
@debug true != false  // true
@debug null != false  // true

@debug get-function("rgba") == get-function("rgba")  // true
@debug get-function("rgba") != get-function("hsla")  // true