1. 犀牛前端部落首页
  2. Sass教程

Sass 列表(List)函数方法

Sass列表函数允许您以预期的方式查询,操作和组合列表。 可以使用SassScript章节中描述的任何选项指定列表,但是您需要用括号括起它们以清楚地表明列表是单个参数。

Sass列表是不可变的(它们不能更改)。 因此,返回列表的所有列表函数,例如join()返回一个新列表。 它们不会改变原始列表。

就像字符串函数一样,Sass列表唯一棘手的问题是它们是基于单一的而不是基于零的。 (有关示例,请参见表中的nth()函数)。

函数 描述 例子
length($list) 返回列表中的元素数 length(1 2 3) Result:3
nth($list, $n) 返回列表中的第n个元素 nth(1 2 3, 2) Result:2
set-nth($list, $n, $value) 将列表中的第n个元素设置为提供的值 set-nth(1 2 3, 2, 5) Result:(1 5 3)
join($list1, $list2, [$separator]) 将$ list2追加到$ list1的末尾。$separator参数可以包含值逗号,空格或auto。自动值(默认值)将使用第一个列表中的分隔符。 join(1 2 3, 4 5 6) Result:(1 2 3 4 5 6)
append($list1, $val, [$separator]) 将单个值附加到列表的末尾。如果提供了$ separator参数(默认为auto),则函数返回的整个列表将使用该分隔符 append((1, 2, 3), 4) Result:(1, 2, 3, 4)
zip($lists) 将提供的列表的值交错到单个多维列表中 zip((red, green, blue), (10px, 15px, 5px)) Result:((#ff0000 10px), (#00ff00 15px), (#0000ff 5px))
index($list, $value) 返回$ value指定的索引位置的元素 index((1 2 3), 2) Result:2
list-separator($list) 以字符串形式返回列表中使用的分隔符的名称 list-separator((1, 2, 3)) Result:"comma" list-separator((1 2 3)) Result:"space"

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2506.html

发表评论

登录后才能评论