Sass 列表(List)函数

最后更新于：2022-03-27 02:40:14

Sass 列表(List)函数

Sass 列表(List)函数 Sass 函数

Sass 列表(List)函数用于处理列表，可以访问列表中的值，向列表添加元素，合并列表等。

Sass 列表是不可变的，因此在处理列表时，返回的是一个新的列表，而不是在原有的列表上进行修改。

列表的起始索引值为 1，记住不是 0。

下表列出了 Sass 的列表函数：

函数 描述 & 实例
append(list, value, [separator]) 将单个值 value 添加到列表尾部。separator 是分隔符，默认会自动侦测，或者指定为逗号或空格。

实例:
append((a b c), d)
结果: a b c d
append((a b c), (d), comma)
结果: a, b, c, d
index(list, value) 返回元素 value 在列表中的索引位置。

实例:
index(a b c, b)
结果: 2
index(a b c, f)
结果: null
is-bracketed(list) 判断列表中是否有中括号

实例:
is-bracketed([a b c])
结果: true
is-bracketed(a b c)
结果:
false
join(list1, list2, [separator, bracketed]) 合并两列表，将列表 list2 添加到列表 list1 的末尾。separator
是分隔符，默认会自动侦测，或者指定为逗号或空格。 bracketed 默认会自动侦测是否有中括号，可以设置为 true 或 false。

实例:
join(a b c, d e f)
结果: a b c d e f
join((a b c), (d e f),
comma)
结果: a, b, c, d, e, f
join(a b c, d e f, $bracketed: true)
结果:
[a b c d e f]
length(list) 返回列表的长度

实例:
length(a b c)
结果: 3
list-separator(list) 返回一列表的分隔符类型。可以是空格或逗号。

实例:
list-separator(a b c)
结果: “space”
list-separator(a, b, c)
结果: “comma”
nth(list, n) 获取第 n 项的值。

实例:
nth(a b c, 3)
结果: c
set-nth(list, n, value) 设置列表第 n 项的值为 value。

实例:
set-nth(a b c, 2, x)
结果: a x c
zip(lists) 将多个列表按照以相同索引值为一组，重新组成一个新的多维度列表。

实例:
zip(1px 2px 3px, solid dashed dotted, red green blue)
结果: 1px
solid red, 2px dashed green, 3px dotted blue

Sass 列表(List)函数 Sass 函数