sass:list
在 Sass 中，每个映射都算作一个列表，其中包含每个键/值对的两个元素列表。例如，(1: 2, 3: 4)计为(1 2, 3 4)。所以所有这些功能也适用于地图！单个值也算作列表。所有这些函数都将1px视为包含值1px的列表。
list.append()
list.append($list, $val, $separator: auto) append($list, $val, $separator: auto) //=> list
返回在末尾添加了
$val
的
$list
的副本。如果
$separator
是逗号、空格或斜杠，则返回的列表分别是逗号分隔的、空格分隔的或斜杠分隔的。如果是
auto
（默认），返回的列表将使用与
$list
相同的分隔符（如果
$list
没有分隔符，则使用空格）。不允许使用其他值。
请注意，与列表不同
list.join()
，如果
$val
是一个列表，则它嵌套在返回的列表中，而不是将其所有元素添加到返回的列表中。
@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.index($list, $val) index($list, $val) //=> number | null
返回
$list
中
$val
的索引。如果
$val
未出现在
$list
中，则返回
null
。如果
$val
在
$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.is-bracketed()
list.is-bracketed($list) is-bracketed($list) //=> boolean
返回 $list 是否包含方括号。
@debug list.is-bracketed(1px 2px 3px); // false @debug list.is-bracketed([1px, 2px, 3px]); // true
list.join()
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
是逗号、空格或斜杠，则返回的列表分别是逗号分隔的、空格分隔的或斜杠分隔的。如果是
auto
（默认值）返回的列表将使用与
$list1
相同的分隔符（如果它有分隔符），或者使用与
$list2
相同的分隔符（如果它有分隔符），或者使用空格。不允许使用其他值。
如果
$bracketed
为auto（默认），则如果
$list1
存在，则返回的列表将被括起来。否则，如果
$bracketed
为
true
，则返回的列表将包含方括号；如果
$bracketed
为
false
，则不包含方括号。
@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) length($list) //=> number
返回 $list 的长度。这也可以返回地图映射（maps）中的对数。
@debug list.length(10px); // 1 @debug list.length(10px 20px 30px); // 3 @debug list.length((width: 10px, height: 20px)); // 2
list.separator()
list.separator($list) separator($list) //=> unquoted string
返回 $list 使用的分隔符的名称，可以是空格、逗号或斜杠。如果 $list 没有分隔符，则返回空格。
@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.nth($list,$n) nth($list,$n)
返回索引 $n 处的 $list 元素。如果 $n 为负，则从 $list 的末尾开始计算。如果索引 $n 处没有元素，则抛出错误。
list.set-nth()
list.set-nth($list,$n, $value) set-nth($list,$n, $value) //=> list
返回索引为 $n 的元素替换为 $value 的 $list 的副本。如果 $n 为负，则从 $list 的末尾开始计算。如果索引 $n 处没有现有元素，则抛出错误。
@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()
list.slash($elements...) //=> list
返回包含 $elements 元素的斜杠分隔列表。
⚠️注意！
此函数是用于创建斜杠分隔列表的临时解决方案。最终，它们将用斜杠逐字书写，如1px/2px/solid，但目前斜杠用于除法，因此在删除旧语法之前，Sass不能将其用于新语法。
@debug list.slash(1px, 50px, 100px); // 10px / 50px / 100px
list.zip()
list.zip($lists...) zip($lists...) //=> list
将 $lists 中的每个列表合并为一个子列表列表。返回的列表中的每个元素都包含 $lists 中该位置的所有元素。返回的列表与 $lists 中最短的列表一样长。返回的列表始终以逗号分隔，子列表始终以空格分隔。
@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