列表

兼容性 (Square Brackets):

Dart Sass

✓

LibSass

since 3.5.0

Ruby Sass

since 3.5.0

➤

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

¥Lists contain a sequence of other values. In Sass, elements in lists can be separated by commas (Helvetica, Arial, sans-serif), spaces (10px 15px 0 0), or slashes as long as it’s consistent within the list. Unlike most other languages, lists in Sass don’t require special brackets; any expressions separated with spaces or commas count as a list. However, you’re allowed to write lists with square brackets ([line1 line2]), which is useful when using grid-template-columns.

Sass 列表可以包含一个甚至零个元素。单元素列表可以写成 (<expression>,) 或 [<expression>]，零元素列表可以写成 () 或 []。此外，所有 列出函数 都会将不在列表中的各个值视为包含该值的列表，这意味着你很少需要显式创建单元素列表。

¥Sass lists can contain one or even zero elements. A single-element list can be written either (<expression>,) or [<expression>], and a zero-element list can be written either () or []. Also, all list functions will treat individual values that aren’t in lists as though they’re lists containing that value, which means you rarely need to explicitly create single-element lists.

斜杠分隔的列表斜杠分隔的列表 permalink

¥Slash-Separated Lists

Sass 中的列表可以用斜杠分隔，以表示值，例如用于设置 font-size 和 line-height 的 font: 12px/30px 简写或用于创建具有给定不透明度值的颜色的 hsl(80 100% 50% / 0.5) 语法。然而，斜杠分隔的列表目前不能按字面书写。Sass 历史上使用 / 字符来表示划分，因此，虽然现有样式表过渡到使用 math.div() 斜杠分隔列表，但只能使用 list.slash() 编写。

¥Lists in Sass can be separated by slashes, to represent values like the font: 12px/30px shorthand for setting font-size and line-height or the hsl(80 100% 50% / 0.5) syntax for creating a color with a given opacity value. However, slash-separated lists can’t currently be written literally. Sass historically used the / character to indicate division, so while existing stylesheets transition to using math.div() slash-separated lists can only be written using list.slash().

详细信息请参见 重大变化：斜线作为除法。

¥For more details, see Breaking Change: Slash as Division.

使用列表使用列表 permalink

¥Using Lists

Sass 提供了一些 函数，使使用列表编写强大的样式库成为可能，或者使应用的样式表更干净、更易于维护。

¥Sass provides a handful of functions that make it possible to use lists to write powerful style libraries, or to make your app’s stylesheet cleaner and more maintainable.

索引索引 permalink

¥Indexes

其中许多函数接受或返回数字（称为索引），它们引用列表中的元素。索引 1 表示列表的第一个元素。请注意，这与许多索引从 0 开始的编程语言不同！Sass 还可以轻松引用列表的末尾。索引 -1 指列表中的最后一个元素，-2 指倒数第二个元素，依此类推。

¥Many of these functions take or return numbers, called indexes, that refer to the elements in a list. The index 1 indicates the first element of the list. Note that this is different than many programming languages where indexes start at 0! Sass also makes it easy to refer to the end of a list. The index -1 refers to the last element in a list, -2 refers to the second-to-last, and so on.

访问元素访问元素 permalink

¥Access an Element

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

¥Lists aren’t much use if you can’t get values out of them. You can use the list.nth($list, $n) function to get the element at a given index in a list. The first argument is the list itself, and the second is the index of the value you want to get out.

@use 'sass:list';

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

@use 'sass:list'

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

为每个元素做一些事情为每个元素做一些事情 permalink

¥Do Something for Every Element

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

¥This doesn’t actually use a function, but it’s still one of the most common ways to use lists. The @each rule evaluates a block of styles for each element in a list, and assigns that element to a variable.

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

添加到列表添加到列表 permalink

¥Add to a List

将元素添加到列表也很有用。list.append($list, $val) 函数 接受一个列表和一个值，并返回列表的副本，并将值添加到末尾。请注意，因为 Sass 列表是 不可变的，所以它不会修改原始列表。

¥It’s also useful to add elements to a list. The list.append($list, $val) function takes a list and a value, and returns a copy of the list with the value added to the end. Note that because Sass lists are immutable, it doesn’t modify the original list.

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

在列表中查找元素在列表中查找元素 permalink

¥Find an Element in a List

如果你需要检查某个元素是否在列表中或找出它所在的索引，请使用 list.index($list, $value) 函数。这需要一个列表和一个要在该列表中定位的值，并返回该值的索引。

¥If you need to check if an element is in a list or figure out what index it’s at, use the list.index($list, $value) function. This takes a list and a value to locate in that list, and returns the index of that value.

@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

@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.index() 返回 null。由于 null 是 虚假的，因此你可以将 list.index() 与 @if 或 if() 一起使用来检查列表是否包含给定值。

¥If the value isn’t in the list at all, list.index() returns null. Because null is falsey, you can use list.index() with @if or if() to check whether a list does or doesn’t contain a given value.

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


  // ...

不可变性不可变性 permalink

¥Immutability

Sass 中的列表是不可变的，这意味着列表值的内容永远不会改变。Sass 的列表函数都返回新列表而不是修改原始列表。不可变性有助于避免许多偷偷摸摸的错误，当样式表的不同部分共享相同的列表时，这些错误可能会悄悄出现。

¥Lists in Sass are immutable, which means that the contents of a list value never changes. Sass’s list functions all return new lists rather than modifying the originals. Immutability helps avoid lots of sneaky bugs that can creep in when the same list is shared across different parts of the stylesheet.

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

¥You can still update your state over time by assigning new lists to the same variable, though. This is often used in functions and mixins to collect a bunch of values into one list.

@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

参数列表参数列表 permalink

¥Argument Lists

当你声明一个采用 任意参数 的 mixin 或函数时，你获得的值是一个称为参数列表的特殊列表。它的作用就像一个列表，其中包含传递给 mixin 或函数的所有参数，并具有一个额外功能：如果用户传递了关键字参数，则可以通过将参数列表传递给 meta.keywords() 函数。

¥When you declare a mixin or function that takes arbitrary arguments, the value you get is a special list known as an argument list. It acts just like a list that contains all the arguments passed to the mixin or function, with one extra feature: if the user passed keyword arguments, they can be accessed as a map by passing the argument list to the meta.keywords() function.

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