sass:list

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.

💡 Lustige Tatsache

In Sass zählt jede Map als eine Liste, die für jedes Schlüssel-Wert-Paar eine zweielementige Liste enthält. Zum Beispiel zählt (1: 2, 3: 4) als (1 2, 3 4). Daher funktionieren all diese Funktionen auch für Maps!

Auch einzelne Werte zählen als Listen. All diese Funktionen behandeln 1px als eine Liste, die den Wert 1px enthält.

list.append($list, $val, $separator: auto)
append($list, $val, $separator: auto) //=> list

Gibt eine Kopie von $list zurück, an deren Ende $val angehängt ist.

Wenn $separator comma, space oder slash ist, ist die zurückgegebene Liste entsprechend durch Kommas, Leerzeichen oder Schrägstriche getrennt. Wenn er auto (Standard) ist, verwendet die zurückgegebene Liste denselben Trenner wie $list (oder space, wenn $list keinen Trenner hat). Andere Werte sind nicht erlaubt.

Beachten Sie, dass im Gegensatz zu list.join(), wenn $val eine Liste ist, diese in der zurückgegebenen Liste verschachtelt wird, anstatt dass all ihre Elemente der zurückgegebenen Liste hinzugefügt werden.

Spielplatz

SCSS-Syntax

@use 'sass:list';

@debug list.append(10px 20px, 30px); // 10px 20px 30px
@debug list.append((blue, red), green); // blue, red, green
@debug list.append(10px 20px, 30px 40px); // 10px 20px (30px 40px)
@debug list.append(10px, 20px, $separator: comma); // 10px, 20px
@debug list.append((blue, red), green, $separator: space); // blue red green
Spielplatz

Sass-Syntax

@use 'sass:list'

@debug list.append(10px 20px, 30px)  // 10px 20px 30px
@debug list.append((blue, red), green)  // blue, red, green
@debug list.append(10px 20px, 30px 40px)  // 10px 20px (30px 40px)
@debug list.append(10px, 20px, $separator: comma)  // 10px, 20px
@debug list.append((blue, red), green, $separator: space)  // blue red green

list.index($list, $value)
index($list, $value) //=> number | null

Gibt den Index von $value in $list zurück.

Wenn $value nicht in $list vorkommt, gibt dies null zurück. Wenn $value mehrmals in $list vorkommt, gibt dies den Index seines ersten Vorkommens zurück.

Spielplatz

SCSS-Syntax

@use 'sass:list';

@debug list.index(1px solid red, 1px); // 1
@debug list.index(1px solid red, solid); // 2
@debug list.index(1px solid red, dashed); // null
Spielplatz

Sass-Syntax

@use 'sass:list'

@debug list.index(1px solid red, 1px)  // 1
@debug list.index(1px solid red, solid)  // 2
@debug list.index(1px solid red, dashed)  // null

list.is-bracketed($list)
is-bracketed($list) //=> boolean

Gibt zurück, ob $list eckige Klammern hat.

Spielplatz

SCSS-Syntax

@use 'sass:list';

@debug list.is-bracketed(1px 2px 3px); // false
@debug list.is-bracketed([1px, 2px, 3px]); // true
Spielplatz

Sass-Syntax

@use 'sass:list'

@debug list.is-bracketed(1px 2px 3px)  // false
@debug list.is-bracketed([1px, 2px, 3px])  // true

list.join($list1, $list2, $separator: auto, $bracketed: auto)
join($list1, $list2, $separator: auto, $bracketed: auto) //=> list

Gibt eine neue Liste zurück, die die Elemente von $list1 gefolgt von den Elementen von $list2 enthält.

⚠️ Vorsicht!

Da einzelne Werte als ein-elementige Listen gelten, ist es möglich, list.join() zu verwenden, um einen Wert am Ende einer Liste hinzuzufügen. Dies wird jedoch *nicht empfohlen*, da, wenn dieser Wert eine Liste ist, er verkettet wird, was wahrscheinlich nicht das ist, was Sie erwarten.

Verwenden Sie stattdessen list.append(), um einen einzelnen Wert zu einer Liste hinzuzufügen. Verwenden Sie list.join() nur, um zwei Listen zu einer einzigen zu kombinieren.

Wenn $separator comma, space oder slash ist, ist die zurückgegebene Liste entsprechend durch Kommas, Leerzeichen oder Schrägstriche getrennt. Wenn er auto (Standard) ist, verwendet die zurückgegebene Liste denselben Trenner wie $list1, wenn dieser einen Trenner hat, andernfalls $list2, wenn dieser einen Trenner hat, andernfalls space. Andere Werte sind nicht erlaubt.

Wenn $bracketed auto (Standard) ist, wird die zurückgegebene Liste geklammert, wenn $list1 geklammert ist. Andernfalls ist die zurückgegebene Liste mit eckigen Klammern versehen, wenn $bracketed wahr ist, und ohne Klammern, wenn $bracketed falsch ist.

Spielplatz

SCSS-Syntax

@use 'sass:list';

@debug list.join(10px 20px, 30px 40px); // 10px 20px 30px 40px
@debug list.join((blue, red), (#abc, #def)); // blue, red, #abc, #def
@debug list.join(10px, 20px); // 10px 20px
@debug list.join(10px, 20px, $separator: comma); // 10px, 20px
@debug list.join((blue, red), (#abc, #def), $separator: space); // blue red #abc #def
@debug list.join([10px], 20px); // [10px 20px]
@debug list.join(10px, 20px, $bracketed: true); // [10px 20px]
Spielplatz

Sass-Syntax

@use 'sass:list'

@debug list.join(10px 20px, 30px 40px)  // 10px 20px 30px 40px
@debug list.join((blue, red), (#abc, #def))  // blue, red, #abc, #def
@debug list.join(10px, 20px)  // 10px 20px
@debug list.join(10px, 20px, comma)  // 10px, 20px
@debug list.join((blue, red), (#abc, #def), space)  // blue red #abc #def
@debug list.join([10px], 20px)  // [10px 20px]
@debug list.join(10px, 20px, $bracketed: true)  // [10px 20px]

list.length($list)
length($list) //=> number

Gibt die Länge von $list zurück.

Dies kann auch die Anzahl der Paare in einer Map zurückgeben.

Spielplatz

SCSS-Syntax

@use 'sass:list';

@debug list.length(10px); // 1
@debug list.length(10px 20px 30px); // 3
@debug list.length((width: 10px, height: 20px)); // 2
Spielplatz

Sass-Syntax

@use 'sass:list'

@debug list.length(10px)  // 1
@debug list.length(10px 20px 30px)  // 3
@debug list.length((width: 10px, height: 20px))  // 2

list.separator($list)
list-separator($list) //=> unquoted string

Gibt den Namen des von $list verwendeten Trenners zurück, entweder space, comma oder slash.

Wenn $list keinen Trenner hat, gibt es space zurück.

Spielplatz

SCSS-Syntax

@use 'sass:list';

@debug list.separator(1px 2px 3px); // space
@debug list.separator((1px, 2px, 3px)); // comma
@debug list.separator('Helvetica'); // space
@debug list.separator(()); // space
Spielplatz

Sass-Syntax

@use 'sass:list'

@debug list.separator(1px 2px 3px)  // space
@debug list.separator((1px, 2px, 3px))  // comma
@debug list.separator('Helvetica')  // space
@debug list.separator(())  // space

list.nth($list, $n)
nth($list, $n)

Gibt das Element von $list am Index $n zurück.

Wenn $n negativ ist, zählt es vom Ende von $list. Löst einen Fehler aus, wenn kein Element am Index $n vorhanden ist.

Spielplatz

SCSS-Syntax

@use 'sass:list';

@debug list.nth(10px 12px 16px, 2); // 12px
@debug list.nth([line1, line2, line3], -1); // line3
Spielplatz

Sass-Syntax

@use 'sass:list'

@debug list.nth(10px 12px 16px, 2)  // 12px
@debug list.nth([line1, line2, line3], -1)  // line3

list.set-nth($list, $n, $value)
set-nth($list, $n, $value) //=> list

Gibt eine Kopie von $list zurück, bei der das Element am Index $n durch $value ersetzt wurde.

Wenn $n negativ ist, zählt es vom Ende von $list. Löst einen Fehler aus, wenn kein vorhandenes Element am Index $n vorhanden ist.

Spielplatz

SCSS-Syntax

@use 'sass:list';

@debug list.set-nth(10px 20px 30px, 1, 2em); // 2em 20px 30px
@debug list.set-nth(10px 20px 30px, -1, 8em); // 10px, 20px, 8em
@debug list.set-nth((Helvetica, Arial, sans-serif), 3, Roboto); // Helvetica, Arial, Roboto
Spielplatz

Sass-Syntax

@use 'sass:list'

@debug list.set-nth(10px 20px 30px, 1, 2em); // 2em 20px 30px
@debug list.set-nth(10px 20px 30px, -1, 8em); // 10px, 20px, 8em
@debug list.set-nth((Helvetica, Arial, sans-serif), 3, Roboto); // Helvetica, Arial, Roboto

list.slash($elements...) //=> list

Gibt eine durch Schrägstriche getrennte Liste zurück, die $elements enthält.

⚠️ Vorsicht!

Diese Funktion ist eine vorübergehende Lösung zur Erstellung von durch Schrägstriche getrennten Listen. Irgendwann werden sie buchstäblich mit Schrägstrichen geschrieben, wie in 1px / 2px / solid, aber vorerst werden Schrägstriche für die Division verwendet, sodass Sass sie nicht für neue Syntax verwenden kann, bis die alte Syntax entfernt ist.

Spielplatz

SCSS-Syntax

@use 'sass:list';

@debug list.slash(1px, 50px, 100px); // 1px / 50px / 100px
Spielplatz

Sass-Syntax

@use 'sass:list'

@debug list.slash(1px, 50px, 100px)  // 1px / 50px / 100px

list.zip($lists...)
zip($lists...) //=> list

Kombiniert jede Liste in $lists zu einer einzigen Liste von Unterlisten.

Jedes Element in der zurückgegebenen Liste enthält alle Elemente an dieser Position in $lists. Die zurückgegebene Liste ist so lang wie die kürzeste Liste in $lists.

Die zurückgegebene Liste ist immer durch Kommas getrennt und die Unterlisten sind immer durch Leerzeichen getrennt.

Spielplatz

SCSS-Syntax

@use 'sass:list';

@debug list.zip(10px 50px 100px, short mid long); // 10px short, 50px mid, 100px long
@debug list.zip(10px 50px 100px, short mid); // 10px short, 50px mid
Spielplatz

Sass-Syntax

@use 'sass:list'

@debug list.zip(10px 50px 100px, short mid long)  // 10px short, 50px mid, 100px long
@debug list.zip(10px 50px 100px, short mid)  // 10px short, 50px mid