sass:string

Kompatibilität
Dart Sass
seit 1.23.0
LibSass
✗
Ruby Sass
✗

Nur Dart Sass unterstützt derzeit das Laden von integrierten Modulen mit @use. Benutzer anderer Implementierungen müssen Funktionen stattdessen über ihre globalen Namen aufrufen.

string.quote($string)
quote($string) //=> string

Gibt $string als Anführungszeichen-umschlossene Zeichenkette zurück.

Spielplatz

SCSS-Syntax

@use "sass:string";

@debug string.quote(Helvetica); // "Helvetica"
@debug string.quote("Helvetica"); // "Helvetica"
Spielplatz

Sass-Syntax

@use "sass:string"

@debug string.quote(Helvetica)  // "Helvetica"
@debug string.quote("Helvetica")  // "Helvetica"

string.index($string, $substring)
str-index($string, $substring) //=> number

Gibt den ersten Index von $substring in $string zurück oder null, wenn $string $substring nicht enthält.

Spielplatz

SCSS-Syntax

@use "sass:string";

@debug string.index("Helvetica Neue", "Helvetica"); // 1
@debug string.index("Helvetica Neue", "Neue"); // 11
Spielplatz

Sass-Syntax

@use "sass:string"

@debug string.index("Helvetica Neue", "Helvetica")  // 1
@debug string.index("Helvetica Neue", "Neue")  // 11

string.insert($string, $insert, $index)
str-insert($string, $insert, $index) //=> string

Gibt eine Kopie von $string zurück, bei der $insert an $index eingefügt wird.

Spielplatz

SCSS-Syntax

@use "sass:string";

@debug string.insert("Roboto Bold", " Mono", 7); // "Roboto Mono Bold"
@debug string.insert("Roboto Bold", " Mono", -6); // "Roboto Mono Bold"
Spielplatz

Sass-Syntax

@use "sass:string"

@debug string.insert("Roboto Bold", " Mono", 7)  // "Roboto Mono Bold"
@debug string.insert("Roboto Bold", " Mono", -6)  // "Roboto Mono Bold"

Wenn $index höher als die Länge von $string ist, wird $insert am Ende hinzugefügt. Wenn $index kleiner als die negative Länge der Zeichenkette ist, wird $insert am Anfang hinzugefügt.

Spielplatz

SCSS-Syntax

@use "sass:string";

@debug string.insert("Roboto", " Bold", 100); // "Roboto Bold"
@debug string.insert("Bold", "Roboto ", -100); // "Roboto Bold"
Spielplatz

Sass-Syntax

@use "sass:string"

@debug string.insert("Roboto", " Bold", 100)  // "Roboto Bold"
@debug string.insert("Bold", "Roboto ", -100)  // "Roboto Bold"

string.length($string)
str-length($string) //=> number

Gibt die Anzahl der Zeichen in $string zurück.

Spielplatz

SCSS-Syntax

@use "sass:string";

@debug string.length("Helvetica Neue"); // 14
@debug string.length(bold); // 4
@debug string.length(""); // 0
Spielplatz

Sass-Syntax

@use "sass:string"

@debug string.length("Helvetica Neue")  // 14
@debug string.length(bold)  // 4
@debug string.length("")  // 0

string.slice($string, $start-at, $end-at: -1)
str-slice($string, $start-at, $end-at: -1) //=> string

Gibt den Teil von $string zurück, beginnend bei Index $start-at und endend bei Index $end-at (beide inklusive).

Spielplatz

SCSS-Syntax

@use "sass:string";

@debug string.slice("Helvetica Neue", 11); // "Neue"
@debug string.slice("Helvetica Neue", 1, 3); // "Hel"
@debug string.slice("Helvetica Neue", 1, -6); // "Helvetica"
Spielplatz

Sass-Syntax

@use "sass:string"

@debug string.slice("Helvetica Neue", 11)  // "Neue"
@debug string.slice("Helvetica Neue", 1, 3)  // "Hel"
@debug string.slice("Helvetica Neue", 1, -6)  // "Helvetica"

string.split($string, $separator, $limit: null) //=> list
Kompatibilität
Dart Sass
seit 1.57.0
LibSass
✗
Ruby Sass
✗

Gibt eine in Klammern gesetzte, durch Kommas getrennte Liste von Teilzeichenketten von $string zurück, die durch $separator getrennt sind. Die $separators sind nicht in diesen Teilzeichenketten enthalten.

Wenn $limit eine Zahl von 1 oder höher ist, wird an höchstens dieser Anzahl von $separators geteilt (und gibt daher höchstens $limit + 1 Zeichenketten zurück). Die letzte Teilzeichenkette enthält den Rest der Zeichenkette, einschließlich aller verbleibenden $separators.

Spielplatz

SCSS-Syntax

@use "sass:string";

@debug string.split("Segoe UI Emoji", " "); // ["Segoe", "UI", "Emoji"]
@debug string.split("Segoe UI Emoji", " ", $limit: 1); // ["Segoe", "UI Emoji"]
Spielplatz

Sass-Syntax

@use "sass:string"

@debug string.split("Segoe UI Emoji", " ")  // ["Segoe", "UI", "Emoji"]
@debug string.split("Segoe UI Emoji", " ", $limit: 1)  // ["Segoe", "UI Emoji"]

string.to-upper-case($string)
to-upper-case($string) //=> string

Gibt eine Kopie von $string zurück, bei der die ASCII-Buchstaben in Großbuchstaben umgewandelt wurden.

Spielplatz

SCSS-Syntax

@use "sass:string";

@debug string.to-upper-case("Bold"); // "BOLD"
@debug string.to-upper-case(sans-serif); // SANS-SERIF
Spielplatz

Sass-Syntax

@use "sass:string"

@debug string.to-upper-case("Bold")  // "BOLD"
@debug string.to-upper-case(sans-serif)  // SANS-SERIF

string.to-lower-case($string)
to-lower-case($string) //=> string

Gibt eine Kopie von $string zurück, bei der die ASCII-Buchstaben in Kleinbuchstaben umgewandelt wurden.

Spielplatz

SCSS-Syntax

@use "sass:string";

@debug string.to-lower-case("Bold"); // "bold"
@debug string.to-lower-case(SANS-SERIF); // sans-serif
Spielplatz

Sass-Syntax

@use "sass:string"

@debug string.to-lower-case("Bold")  // "bold"
@debug string.to-lower-case(SANS-SERIF)  // sans-serif

string.unique-id()
unique-id() //=> string

Gibt eine zufällig generierte Zeichenkette ohne Anführungszeichen zurück, die garantiert ein gültiger CSS-Identifikator und in der aktuellen Sass-Kompilierung eindeutig ist.

Spielplatz

SCSS-Syntax

@use "sass:string";

@debug string.unique-id(); // uabtrnzug
@debug string.unique-id(); // u6w1b1def
Spielplatz

Sass-Syntax

@use "sass:string"

@debug string.unique-id(); // uabtrnzug
@debug string.unique-id(); // u6w1b1def

string.unquote($string)
unquote($string) //=> string

Gibt $string als Zeichenkette ohne Anführungszeichen zurück. Dies kann Zeichenketten erzeugen, die keine gültigen CSS sind, also mit Vorsicht verwenden.

Spielplatz

SCSS-Syntax

@use "sass:string";

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

Sass-Syntax

@use "sass:string"

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