Zeichenketten

Zeichenketten sind Folgen von Zeichen (speziell Unicode-Codepoints). Sass unterstützt zwei Arten von Zeichenketten, deren interne Struktur dieselbe ist, die aber unterschiedlich dargestellt werden: Zeichenketten mit Anführungszeichen, wie "Helvetica Neue", und Zeichenketten ohne Anführungszeichen (auch bekannt als Bezeichner), wie bold. Zusammen decken diese die verschiedenen Arten von Text ab, die in CSS vorkommen.

💡 Lustige Tatsache

Sie können eine Zeichenkette mit Anführungszeichen mit der Funktion string.unquote() in eine Zeichenkette ohne Anführungszeichen umwandeln und eine Zeichenkette ohne Anführungszeichen mit der Funktion string.quote() in eine Zeichenkette mit Anführungszeichen umwandeln.

Spielplatz

SCSS-Syntax

@use "sass:string";

@debug string.unquote(".widget:hover"); // .widget:hover
@debug string.quote(bold); // "bold"
Spielplatz

Sass-Syntax

@use "sass:string"

@debug string.unquote(".widget:hover")  // .widget:hover
@debug string.quote(bold)  // "bold"

Escape-SequenzenEscape-Sequenzen Permalink

Alle Sass-Zeichenketten unterstützen die standardmäßigen CSS Escape-Codes

  • Jedes Zeichen, das keine Buchstabe von A bis F oder keine Zahl von 0 bis 9 ist (selbst ein Zeilenumbruch!), kann als Teil einer Zeichenkette enthalten sein, indem man \ davor schreibt. 

  • Jedes Zeichen kann als Teil einer Zeichenkette enthalten sein, indem man \ gefolgt von seiner Unicode-Codepoint-Nummer in Hexadezimal schreibt. Sie können optional ein Leerzeichen nach der Codepoint-Nummer einfügen, um anzuzeigen, wo die Unicode-Nummer endet.

Spielplatz

SCSS-Syntax

@debug "\""; // '"'
@debug \.widget; // \.widget
@debug "\a"; // "\a" (a string containing only a newline)
@debug "line1\a line2"; // "line1\a line2"
@debug "Nat + Liz \1F46D"; // "Nat + Liz 👭"
Spielplatz

Sass-Syntax

@debug "\""  // '"'
@debug \.widget  // \.widget
@debug "\a"  // "\a" (a string containing only a newline)
@debug "line1\a line2"  // "line1\a line2" (foo and bar are separated by a newline)
@debug "Nat + Liz \1F46D"  // "Nat + Liz 👭"

💡 Lustige Tatsache

Für Zeichen, die in Zeichenketten erlaubt sind, erzeugt die Unicode-Escape-Sequenz exakt dieselbe Zeichenkette wie das Zeichen selbst.

AnführungszeichenAnführungszeichen Permalink

Zeichenketten mit Anführungszeichen werden zwischen einfachen oder doppelten Anführungszeichen geschrieben, wie in "Helvetica Neue". Sie können Interpolation sowie jedes nicht-escapte Zeichen enthalten, außer 

  • \, das als \\ escapet werden kann;
  • ' oder ", je nachdem, welche zum Definieren der Zeichenkette verwendet wurde, die als \' oder \" escapet werden können;
  • Zeilenumbrüche, die als \a (einschließlich eines nachfolgenden Leerzeichens) escapet werden können.

Es ist garantiert, dass Zeichenketten mit Anführungszeichen in CSS-Zeichenketten kompiliert werden, die den gleichen Inhalt wie die ursprünglichen Sass-Zeichenketten haben. Das genaue Format kann je nach Implementierung oder Konfiguration variieren – eine Zeichenkette, die ein doppeltes Anführungszeichen enthält, kann als "\"" oder '"' kompiliert werden, und ein nicht-ASCII-Zeichen kann entweder escapet oder nicht escapet sein. Aber das sollte in jeder standardkonformen CSS-Implementierung, einschließlich aller Browser, gleich interpretiert werden.

Spielplatz

SCSS-Syntax

@debug "Helvetica Neue"; // "Helvetica Neue"
@debug "C:\\Program Files"; // "C:\\Program Files"
@debug "\"Don't Fear the Reaper\""; // "\"Don't Fear the Reaper\""
@debug "line1\a line2"; // "line1\a line2"

$roboto-variant: "Mono";
@debug "Roboto #{$roboto-variant}"; // "Roboto Mono"
Spielplatz

Sass-Syntax

@debug "Helvetica Neue"  // "Helvetica Neue"
@debug "C:\\Program Files"  // "C:\\Program Files"
@debug "\"Don't Fear the Reaper\""  // "\"Don't Fear the Reaper\""
@debug "line1\a line2"  // "line1\a line2"

$roboto-variant: "Mono"
@debug "Roboto #{$roboto-variant}"  // "Roboto Mono"

💡 Lustige Tatsache

Wenn eine Zeichenkette mit Anführungszeichen über Interpolation in einen anderen Wert eingefügt wird, werden ihre Anführungszeichen entfernt! Dies erleichtert das Schreiben von Zeichenketten, die Selektoren enthalten, die beispielsweise ohne zusätzliche Anführungszeichen in Stilregeln eingefügt werden können.

Ohne AnführungszeichenOhne Anführungszeichen Permalink

Zeichenketten ohne Anführungszeichen werden als CSS Bezeichner geschrieben, gemäß dem untenstehenden Diagramm. Sie können Interpolation überall enthalten.

Eisenbahndiagramm Copyright © 2018 W3C® (MIT, ERCIM, Keio, Beihang). Es gelten die W3C Haftungsausschluss, Marken- und permissive Dokumentlizenz-Regeln.
Spielplatz

SCSS-Syntax

@debug bold; // bold
@debug -webkit-flex; // -webkit-flex
@debug --123; // --123

$prefix: ms;
@debug -#{$prefix}-flex; // -ms-flex
Spielplatz

Sass-Syntax

@debug bold  // bold
@debug -webkit-flex  // -webkit-flex
@debug --123  // --123

$prefix: ms
@debug -#{$prefix}-flex  // -ms-flex

⚠️ Vorsicht!

Nicht alle Bezeichner werden als Zeichenketten ohne Anführungszeichen interpretiert

  • CSS-Farbnamen werden als Farben interpretiert.
  • null wird als Sass's null-Wert interpretiert.
  • true und false werden als Booleans interpretiert.
  • not, and und or werden als Boolesche Operatoren interpretiert. 

Aus diesem Grund ist es im Allgemeinen eine gute Idee, Zeichenketten mit Anführungszeichen zu verwenden, es sei denn, Sie schreiben speziell den Wert einer CSS-Eigenschaft, die Zeichenketten ohne Anführungszeichen verwendet.

Escape-Sequenzen in Zeichenketten ohne AnführungszeichenEscape-Sequenzen in Zeichenketten ohne Anführungszeichen Permalink

Kompatibilität (Normalisierung)
Dart Sass
seit 1.11.0
LibSass
✗
Ruby Sass
✗

LibSass, Ruby Sass und ältere Versionen von Dart Sass normalisieren keine Escape-Sequenzen in Bezeichnern. Stattdessen ist der Text in der Zeichenkette ohne Anführungszeichen der exakte Text, den der Benutzer geschrieben hat. Zum Beispiel sind \1F46D und 👭 nicht als gleichwertig betrachtet.

Wenn eine Zeichenkette ohne Anführungszeichen analysiert wird, werden die literalen Escape-Sequenzen als Teil der Zeichenkette analysiert. Zum Beispiel wird \a als die Zeichen \, a und Leerzeichen analysiert. Um sicherzustellen, dass Zeichenketten ohne Anführungszeichen, die die gleiche Bedeutung in CSS haben, auf die gleiche Weise analysiert werden, werden diese Escape-Sequenzen jedoch normalisiert. Für jeden Codepoint, ob er escapet oder unescapet ist

  • Wenn es sich um ein gültiges Bezeichner-Zeichen handelt, wird es ohne Escape in die Zeichenkette ohne Anführungszeichen aufgenommen. Zum Beispiel gibt \1F46D die Zeichenkette ohne Anführungszeichen 👭 zurück.

  • Wenn es sich um ein druckbares Zeichen handelt, das kein Zeilenumbruch oder Tabulator ist, wird es nach einem \ aufgenommen. Zum Beispiel gibt \21 die Zeichenkette ohne Anführungszeichen \! zurück.

  • Andernfalls wird die kleingeschriebene Unicode-Escape-Sequenz mit einem nachfolgenden Leerzeichen aufgenommen. Zum Beispiel gibt \7Fx die Zeichenkette ohne Anführungszeichen \7f x zurück.

Spielplatz

SCSS-Syntax

@use "sass:string";

@debug \1F46D; // 👭
@debug \21; // \!
@debug \7Fx; // \7f x
@debug string.length(\7Fx); // 5
Spielplatz

Sass-Syntax

@use "sass:string"

@debug \1F46D  // 👭
@debug \21  // \!
@debug \7Fx  // \7f x
@debug string.length(\7Fx)  // 5

Zeichenketten-IndizesZeichenketten-Indizes Permalink

Sass bietet eine Reihe von Zeichenkettenfunktionen, die Zahlen, sogenannte Indizes, als Argumente nehmen oder zurückgeben, die sich auf die Zeichen in einer Zeichenkette beziehen. Der Index 1 bezieht sich auf das erste Zeichen der Zeichenkette. Beachten Sie, dass dies anders ist als bei vielen Programmiersprachen, bei denen Indizes bei 0 beginnen! Sass erleichtert auch das Referenzieren des Endes einer Zeichenkette. Der Index -1 bezieht sich auf das letzte Zeichen in einer Zeichenkette, -2 auf das vorletzte usw. 

Spielplatz

SCSS-Syntax

@use "sass:string";

@debug string.index("Helvetica Neue", "Helvetica"); // 1
@debug string.index("Helvetica Neue", "Neue"); // 11
@debug string.slice("Roboto Mono", -4); // "Mono"
Spielplatz

Sass-Syntax

@use "sass:string"

@debug string.index("Helvetica Neue", "Helvetica")  // 1
@debug string.index("Helvetica Neue", "Neue")  // 11
@debug string.slice("Roboto Mono", -4)  // "Mono"