Compatibility: Dart Sass since 1.23.0 | LibSass ✗ | Ruby Sass ✗
💡 有趣的事实：
在 Sass 中，每个 map 都算作一个列表，其中包含每个键/值对的双元素列表。 例如，(1: 2, 3: 4) 算作 (1 2, 3 4)。 所以所有这些功能也适用于地图！
单个值也算作列表。 所有这些函数都将 1px 视为包含值 1px 的列表。
list.append($list, $val, $separator: auto)
append($list, $val, $separator: auto) //=> list
返回在末尾添加了 $val 的 $list 的副本。
如果 $separator 是 comma、space 或 slash，则返回的列表分别以逗号分隔、空格分隔或斜杠分隔。 如果它是 auto(默认值)，返回的列表将使用与 $list 相同的分隔符(如果 $list 没有分隔符，则使用 space)。 不允许使用其他值。
请注意，与 list.join() 不同，如果 $val 是一个列表，它会嵌套在返回的列表中，而不是将其所有元素都添加到返回的列表中 .
SCSS Syntax
@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
返回 $list 中 $value 的 index。
如果 $value 没有出现在 $list 中，则返回 null。 如果 $value 在 $list 中出现多次，这将返回它第一次出现的索引。
SCSS Syntax
@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
Returns whether $list has square brackets.
SCSS Syntax
@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
返回一个新列表，其中包含 $list1 的元素，后跟 $list2 的元素。
⚠️ 注意！
因为单个值算作单元素列表，所以可以使用 list.join() 将值添加到列表的末尾。 但是，不推荐这样做，因为如果该值是一个列表，它将被连接起来，这可能不是您所期望的。
使用 list.append() 而不是将单个值添加到列表。 仅使用 list.join() 将两个列表合并为一个。
如果 $separator 是 comma、space 或 slash，则返回的列表分别以逗号分隔、空格分隔或斜杠分隔。 如果它是 auto(默认值)，返回的列表将使用与 $list1 相同的分隔符(如果它有分隔符)，否则将使用与 $list2(如果它有分隔符)或 space 相同的分隔符。 不允许使用其他值。
如果 $bracketed 是 auto(默认值)，如果 $list1 是，则返回的列表将被括起来。 否则，如果 $bracketed 为 truthy，则返回的列表将带有方括号；如果 $bracketed 为假，则返回的列表将没有括号。
SCSS Syntax
@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]
list.length($list)
length($list) //=> number
返回 $list 的长度。
这也可以返回地图中的对数。
SCSS Syntax
@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
返回 $list 使用的分隔符的名称，可以是 space、comma 或 slash。
如果 $list 没有分隔符，则返回 space。
SCSS Syntax
@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)
返回 index $n 处的 $list 元素。
如果 $n 为负数，则从 $list 的末尾开始计数。 如果索引“$n”处没有元素，则抛出错误。
SCSS Syntax
@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
返回 $list 的副本，其中 index $n 中的元素替换为 $value。
如果 $n 为负数，则从 $list 的末尾开始计数。 如果索引“$n”处不存在元素，则抛出错误。
SCSS Syntax
@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
返回包含 $elements 的斜线分隔列表。
⚠️ 注意！
此函数是创建斜杠分隔列表的临时解决方案。 最终，它们将按字面意思用斜线书写，如 1px / 2px / solid，但暂时 斜线用于除法 所以 Sass 可以 在删除旧语法之前不要将它们用于新语法。
SCSS Syntax
@debug list.slash(1px, 50px, 100px); // 1px / 50px / 100px
list.zip($lists...)
zip($lists...) //=> list
将 $lists 中的每个列表组合成一个子列表列表。
返回列表中的每个元素都包含 $lists 中该位置的所有元素。 返回的列表与 $lists 中最短的列表一样长。
返回的列表始终以逗号分隔，子列表始终以空格分隔。
SCSS Syntax
@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