清单

兼容性（方括号）：

Dart·Sass（Dart Sass）

✓

LibSass

从  3.5.0开始

rubySass

从  3.5.0开始

▶

列表包含其他值的序列。在Sass中，列表中的元素可以用逗号（Helvetica, Arial, sans-serif）或空格（10px 15px 0 0）分隔，只要它们在列表中保持一致即可。与大多数其他语言不同，Sass中的列表不需要特殊的括号；用空格或逗号分隔的任何表达式都算作一个列表。但是，您可以使用方括号（[line1 line2]）编写列表，这在使用时很有用grid-template-columns。

Sass列表可以包含一个或什至零个元素。的单元素列表可以被写入任一(<expression>,)或[<expression>]，并且可以被写入一个零元素列表要么()或[]。而且，所有列表函数都会将不在列表中的单个值视为包含该值的列表，这意味着您几乎不需要显式创建单元素列表。

使用列表永久链接使用列表

Sass提供了一些功能，这些功能使您可以使用列表来编写功能强大的样式库，或者使应用程序的样式表更清洁，更可维护。

索引永久链接索引

其中许多函数采用或返回称为索引的数字，这些数字引用列表中的元素。索引1表示列表的第一个元素。请注意，这与许多从0开始的编程语言不同！Sass还使引用列表的末尾变得容易。索引-1表示列表中的最后一个元素，-2表示倒数第二个，依此类推。

访问元素永久链接访问元素

如果您无法从中获取值，则列表用处不大。您可以使用该list.nth($list, $n)函数在列表中的给定索引处获取元素。第一个参数是列表本身，第二个参数是您要获取的值的索引。

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

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

为每个元素做某事永久链接为每个元素做某事

这实际上并没有使用函数，但是它仍然是使用列表的最常用方法之一。该@each规则为列表中的每个元素评估一个样式块，并将该元素分配给变量。

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

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

$sizes: 40px, 50px, 80px

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

.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;
}

添加到列表永久链接添加到列表

将元素添加到列表中也很有用。该list.append($list, $val)函数获取一个列表和一个值，然后返回列表的副本，并将该值添加到末尾。请注意，由于Sass列表是不可变的，因此它不会修改原始列表。

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

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

在列表中查找元素永久链接在列表中查找元素

如果您需要检查某个元素是否在列表中或弄清楚它在什么索引上，请使用list.index($list, $value)函数。这需要一个列表和一个值以在该列表中定位，并返回该值的索引。

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

@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.index()返回null。因为null是falsey，所以可以将或list.index()与一起使用， 以检查列表是否包含给定值。@ifif()

@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}.";
  }

  // ...
}

@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}."


  // ...

不变性永久不变性

Sass中的列表是不可变的，这意味着列表值的内容永远不会改变。Sass的列表功能全部返回新列表，而不是修改原始列表。不变性有助于避免在样式表的不同部分共享同一列表时可能潜入的许多臭虫。

不过，您仍然可以通过将新列表分配给同一变量来随时更新状态。这通常在函数和mixin中使用，以将一堆值收集到一个列表中。

@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

@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

参数列表永久链接参数列表

当您声明接受任意参数的mixin或函数时，获得的值是一个称为参数列表的特殊列表。它的作用就像一个包含传递给混入或功能，一个额外的功能的所有参数列表：如果用户通过关键字参数，它们可以作为一个地图来访问相应的参数列表传递给meta.keywords()函数。

@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,
)

@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)

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

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

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