Listen

Kompatibilität (eckige Klammern)
Dart Sass
✓
LibSass
seit 3.5.0
Ruby Sass
seit 3.5.0

Ältere Implementierungen von LibSass und Ruby Sass unterstützten keine Listen mit eckigen Klammern.

Listen enthalten eine Sequenz anderer Werte. In Sass können Elemente in Listen durch Kommas (Helvetica, Arial, sans-serif), Leerzeichen (10px 15px 0 0) oder Schrägstriche getrennt werden, solange dies innerhalb der Liste konsistent ist. Im Gegensatz zu den meisten anderen Sprachen benötigen Listen in Sass keine speziellen Klammern; alle durch Leerzeichen oder Kommas getrennten Ausdrücke zählen als Liste. Sie dürfen Listen jedoch mit eckigen Klammern schreiben ([line1 line2]), was nützlich ist, wenn Sie grid-template-columns verwenden.

Sass-Listen können ein oder sogar null Elemente enthalten. Eine Einzelelementliste kann entweder als (<expression>,) oder [<expression>] geschrieben werden, und eine Nullelementliste kann entweder als () oder [] geschrieben werden. Außerdem behandeln alle Listenfunktionen einzelne Werte, die sich nicht in Listen befinden, so, als wären es Listen, die diesen Wert enthalten. Das bedeutet, dass Sie selten explizit Einzelelement- Listen erstellen müssen.

⚠️ Vorsicht!

Leere Listen ohne Klammern sind kein gültiges CSS, daher lässt Sass Sie diese nicht in einem Eigenschaftswert verwenden.

Schrägstrich-getrennte ListenSchrägstrich-getrennte Listen Permalink

Listen in Sass können durch Schrägstriche getrennt werden, um Werte wie die font: 12px/30px-Kurzschreibweise für das Setzen von font-size und line-height oder die hsl(80 100% 50% / 0.5)-Syntax zur Erstellung einer Farbe mit einem gegebenen Opazitätswert darzustellen. **Schrägstrich-getrennte Listen können derzeit jedoch nicht wörtlich geschrieben werden.** Sass verwendete historisch das Zeichen /, um Division anzuzeigen. Während also bestehende Stylesheets zur Verwendung von math.div() übergehen, können schrägstrich-getrennte Listen nur mithilfe von list.slash() geschrieben werden.

Weitere Details finden Sie unter Breaking Change: Schrägstrich als Division.

Listen verwendenListen verwenden Permalink

Sass bietet eine Reihe von Funktionen, die es ermöglichen, Listen zu verwenden, um leistungsstarke Stilbibliotheken zu schreiben oder das Stylesheet Ihrer App sauberer und wartungsfreundlicher zu gestalten.

IndizesIndizes Permalink

Viele dieser Funktionen nehmen Zahlen entgegen oder geben sie zurück, genannt Indizes, die sich auf die Elemente in einer Liste beziehen. Der Index 1 bezeichnet das erste Element der Liste. Beachten Sie, dass dies anders ist als in vielen Programmiersprachen, in denen Indizes bei 0 beginnen! Sass macht es auch einfach, auf das Ende einer Liste zu verweisen. Der Index -1 bezieht sich auf das letzte Element in einer Liste, -2 auf das vorletzte usw.

Ein Element auswählenEin Element auswählen  Permalink

Listen sind nicht sehr nützlich, wenn man keine Werte daraus extrahieren kann. Sie können die list.nth($list, $n) Funktion verwenden, um das Element an einem bestimmten Index in einer Liste zu erhalten. Das erste Argument ist die Liste selbst, und das zweite ist der Index des Werts, den Sie extrahieren möchten.

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

Etwas für jedes Element tunEtwas für jedes Element tun  Permalink

Dies verwendet tatsächlich keine Funktion, ist aber dennoch eine der häufigsten Arten, Listen zu verwenden. Die @each Regel wertet einen Stilblock für jedes Element in einer Liste aus und weist dieses Element einer Variable zu.

Spielplatz

SCSS-Syntax

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}
Spielplatz

Sass-Syntax

$sizes: 40px, 50px, 80px

@each $size in $sizes
  .icon-#{$size}
    font-size: $size
    height: $size
    width: $size

CSS-Ausgabe

.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

Einer Liste hinzufügenEiner Liste hinzufügen  Permalink

Es ist auch nützlich, Elemente zu einer Liste hinzuzufügen. Die list.append($list, $val) Funktion nimmt eine Liste und einen Wert entgegen und gibt eine Kopie der Liste zurück, wobei der Wert am Ende hinzugefügt wird. Beachten Sie, dass Sass-Listen, da sie unveränderlich sind, die ursprüngliche Liste nicht verändern.

Spielplatz

SCSS-Syntax

@debug append(10px 12px 16px, 25px); // 10px 12px 16px 25px
@debug append([col1-line1], col1-line2); // [col1-line1, col1-line2]
Spielplatz

Sass-Syntax

@debug append(10px 12px 16px, 25px)  // 10px 12px 16px 25px
@debug append([col1-line1], col1-line2)  // [col1-line1, col1-line2]

Ein Element in einer Liste findenEin Element in einer Liste finden  Permalink

Wenn Sie überprüfen müssen, ob ein Element in einer Liste vorhanden ist, oder herausfinden müssen, an welchem Index es sich befindet, verwenden Sie die list.index($list, $value) Funktion. Diese nimmt eine Liste und einen Wert, der in dieser Liste gesucht werden soll, und gibt den Index dieses Werts 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

Wenn der Wert überhaupt nicht in der Liste vorhanden ist, gibt list.index() null zurück. Da null falsy ist, können Sie list.index() mit @if oder if() verwenden, um zu überprüfen, ob eine Liste einen bestimmten Wert enthält oder nicht.

Spielplatz

SCSS-Syntax

@use "sass:list";

$valid-sides: top, bottom, left, right;

@mixin attach($side) {
  @if not list.index($valid-sides, $side) {
    @error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
  }

  // ...
}
Spielplatz

Sass-Syntax

@use "sass:list"

$valid-sides: top, bottom, left, right

@mixin attach($side)
  @if not list.index($valid-sides, $side)
    @error "#{$side} is not a valid side. Expected one of #{$valid-sides}."


  // ...

UnveränderlichkeitUnveränderlichkeit Permalink

Listen in Sass sind unveränderlich, was bedeutet, dass sich der Inhalt eines Listenwerts niemals ändert. Die Listenfunktionen von Sass geben alle neue Listen zurück, anstatt die Originale zu modifizieren. Unveränderlichkeit hilft, viele heimtückische Fehler zu vermeiden, die auftreten können, wenn dieselbe Liste über verschiedene Teile des Stylesheets hinweg gemeinsam genutzt wird.

Sie können Ihren Zustand im Laufe der Zeit dennoch aktualisieren, indem Sie neue Listen derselben Variable zuweisen. Dies wird oft in Funktionen und Mixins verwendet, um eine Reihe von Werten in einer Liste zu sammeln.

Spielplatz

SCSS-Syntax

@use "sass:list";
@use "sass:map";

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms);

@function prefixes-for-browsers($browsers) {
  $prefixes: ();
  @each $browser in $browsers {
    $prefixes: list.append($prefixes, map.get($prefixes-by-browser, $browser));
  }
  @return $prefixes;
}

@debug prefixes-for-browsers("firefox" "ie"); // moz ms
Spielplatz

Sass-Syntax

@use "sass:list"
@use "sass:map"

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)

@function prefixes-for-browsers($browsers)
  $prefixes: ()
  @each $browser in $browsers
    $prefixes: list.append($prefixes, map.get($prefixes-by-browser, $browser))

  @return $prefixes


@debug prefixes-for-browsers("firefox" "ie")  // moz ms

ArgumentlistenArgumentlisten Permalink

Wenn Sie einen Mixin oder eine Funktion deklarieren, die beliebige Argumente entgegennimmt, erhalten Sie als Wert eine spezielle Liste, die als Argumentliste bekannt ist. Sie verhält sich wie eine Liste, die alle an den Mixin oder die Funktion übergebenen Argumente enthält, mit einer zusätzlichen Funktion: Wenn der Benutzer benannte Argumente übergeben hat, können diese als Map abgerufen werden, indem die Argumentliste an die meta.keywords() Funktion übergeben wird.

Spielplatz

SCSS-Syntax

@use "sass:meta";

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)
Spielplatz

Sass-Syntax

@use "sass:meta"

@mixin syntax-colors($args...)
  @debug meta.keywords($args)
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args)
    pre span.stx-#{$name}
      color: $color




@include syntax-colors($string: #080, $comment: #800, $variable: #60b)

CSS-Ausgabe

pre span.stx-string {
  color: #080;
}

pre span.stx-comment {
  color: #800;
}

pre span.stx-variable {
  color: #60b;
}