什么是 list

列表包含其他值的序列。在 Sass 中，列表中的元素可以用逗号分隔，如 Helvetica, Arial, sans-serif，或空格分隔，如 10px 15px 0 0，但不能混合使用空格和逗号。

与大多数其他语言不同，Sass 中的列表不需要特殊的方括号，任何用空格或逗号分隔的表达式都可以算作一个列表。当然，也允许使用方括号来编写列表，如 [a b] 或 [a, b]。

Sass 列表可以包含任意个元素，甚至是包括 0 个。单元素列表可以写成 (a,) 或 [a]，零元素列表可以写成 () 或 []。此外，对待一个单独存在的不在列表中的值，所有内置的列表函数都将他们视为列表，比如 a 对列表函数来说就像是 (a) 或 [a] 似的，这意味着不需要显式地创建像 (a) 或 [a] 这样的单个元素的列表。

索引

Sass 的列表中第一个元素的索引为 1，不同于大多数语言索引从 0 开始。
-1 表示列表中的最后一个元素，-2 表示倒数第二个元素，以此类推。

代码示例

@use 'sass:list';

$sizes: 40px, 50px, 80px;
$font: Helvetica Arial sans-serif;
$colors: [red, green, blue];

.test-one {
  list-index: list.index($sizes, 80px);
  list-append: list.append($font, 100px);
  list-append-one: list.append($sizes, 100px);
  list-append-separator-space: list.append($sizes, 100px, space);
  list-append-separator-comma: list.append($sizes, 100px, comma);
  list-append-origin: $sizes;
  colors: $colors;
  list-is-bracketed-true: list.is-bracketed($colors);
  list-is-bracketed-false: list.is-bracketed($font);
  list-is-join: list.join($font, $colors);
  list-is-join-separator: list.join($font, $colors, comma);
  list-is-join-bracketed: list.join($font, $colors, comma, true);
  list-length: list.length($sizes);
  list-separator: list-separator($colors);
  list-separator-one: list-separator($font);
  list-separator-two: list.separator($sizes);
  list-nth: list.nth($sizes, 1);
  list-nth-one: list.nth($sizes, -1);
  list-set-nth: list.set-nth($sizes, -1, 90);
  list-zip: list.zip($sizes, $font, $colors);
}

编译后

.test-one {
  list-index: 3;
  list-append: Helvetica Arial sans-serif 100px;
  list-append-one: 40px, 50px, 80px, 100px;
  list-append-separator-space: 40px 50px 80px 100px;
  list-append-separator-comma: 40px, 50px, 80px, 100px;
  list-append-origin: 40px, 50px, 80px;
  colors: [red, green, blue];
  list-is-bracketed-true: true;
  list-is-bracketed-false: false;
  list-is-join: Helvetica Arial sans-serif red green blue;
  list-is-join-separator: Helvetica, Arial, sans-serif, red, green, blue;
  list-is-join-bracketed: [Helvetica, Arial, sans-serif, red, green, blue];
  list-length: 3;
  list-separator: comma;
  list-separator-one: space;
  list-separator-two: comma;
  list-nth: 40px;
  list-nth-one: 80px;
  list-set-nth: 40px, 50px, 90;
  list-zip:
    40px Helvetica red,
    50px Arial green,
    80px sans-serif blue;
}

如上述示例，使用的函数如下

下面的方法中涉及到 separator 分隔符，默认 auto，也就是由 sass 自动识别原数据是用什么分割的，可选值 space(空格)，comma(逗号)
Sass 列表是不可变的，因此下面的函数在处理列表时，返回的是一个新的列表，而不是在原有的列表上进行修改。
list.append($list, $val, $separator: auto):将单个值 value 添加到列表尾部。separator 是分隔符，默认会自动侦测，或者指定为逗号或空格。
list.index($list, $value): 返回元素 value 在列表中的索引位置。
list.is-bracketed($list): 判断列表中是否有中括号
list.join($list1, $list2, $separator: auto, $bracketed: auto): 合并两列表，将列表 list2 添加到列表 list1 的末尾。separator 是分隔符，默认会自动侦测，或者指定为逗号或空格。 bracketed 默认会自动侦测是否有中括号，可以设置为 true 或 false。
list.length($list): 返回列表的长度
list.separator($list): 返回一列表的分隔符类型。可以是 space(空格)，comma(逗号)
list.nth($list, $n): 获取第 n 项的值。
list.set-nth($list, $n, $value): 设置列表第 n 项的值为 value。
list.zip($lists...): 将多个列表按照以相同索引值为一组，重新组成一个新的多维度列表。