scss值列表_Sass基础——列表 List 函数

length($list)

length($list): 返回列表元素的个数。对于一个map数据，返回的是键值对的个数。

length(10px) => 1

length(10px 20px 30px) => 3

length((width: 10px, height: 20px)) => 2

nth($list, $n)

nth($list, $n): 取得列表中指定位置的元素。

跟其它语言不同，Sass里的所有索引都是从1开始，对于map类型，返回的是相应位置的键值对。

如果参数为负数，则按相反的顺序向前推，-1为最后一个元素。

指定的索引超出了长度会报错。

nth(10px 20px 30px, 1) => 10px

nth((Helvetica, Arial, sans-serif), 3) => sans-serif

nth((width: 10px, length: 20px), 2) => length, 20px

set-nth($list, $n, $value)

set-nth($list, $n, $value): 修改$list指定$n位置元素的值为$value。

join($list1, $list2, [$separator, $bracketed])

join($list1, $list2, [$separator, $bracketed]): 把风两个List合并为一个List。

如果没有传递$separator分隔符，那么$separator的值就是auto,此时，如果有一个是用空格分隔另一个用逗号分隔则根据第一个参数的分隔符来返回新的List;当两个List都少于两项时，则用结果用空格分隔。如果只有第一个List参数的值为一项，则会根据第二个List参数的分隔符来返回。

如果指定了$separator，则用指定的分隔符隔开，其值有comma和space。

还有一个可选参数$bracketed,如果没传，则按第一个参数的括号情况决定输出是否和用什么括起来。

只能用于两个List合并，不能用于三个或更多，否则会报错。多个合并的时候，可以嵌套来实现。

join(10px 20px, 30px 40px) => 10px 20px 30px 40px

join((blue, red), (#abc, #def)) => blue, red, #abc, #def

join(10px, 20px) => 10px 20px

join(10px, 20px, comma) => 10px, 20px

join((blue, red), (#abc, #def), space) => blue red #abc #def

join([10px], 20px) => [10px 20px]

append($list1, $val, [$separator])

append($list1, $val, [$separator]):在List的未尾添加一个值。如果没有指定$separator分隔符参数，当List只有一个值是，结果会用空格分开，否则用List本来的分隔符。

append(10px 20px, 30px) => 10px 20px 30px

append((blue, red), green) => blue, red, green

append(10px 20px, 30px 40px) => 10px 20px (30px 40px)

append(10px, 20px, comma) => 10px, 20px

append((blue, red), green, space) => blue red green

上面append(10px 20px, 30px 40px) => 10px 20px (30px 40px)可以看出，append只能添加一个新值，将不在括号()里的第一个逗号后面的值看作这个要添加的新值。

zip($lists…)

zip($lists…): 把多个List组合成一个多维List。返回结果的第n个值是把每个参数列表的第n个值拿来用逗号分隔组成其值。如果有一个列表参数此位置无值，则不组合。

返回结果的List的长度为参数中最短的那个列表的长度。

zip(1px 1px 3px, solid dashed solid, red green blue)

=> 1px solid red, 1px dashed green, 3px solid blue

zip(1px 2px 3px,solid dashed dotted,green blue red)

=> ((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

index($list, $value)

index($list, $value): 返回List中一个值的位置。

如果没有找到对应的值，则返回为null。

也可以返回一个map中相应键值对的位置。

index(1px solid red, solid) => 2

index(1px solid red, dashed) => null

index((width: 10px, height: 20px), (height 20px)) => 2

list-separator($list)

list-separator($list): 返回一个列表的分隔符，如果列表的元素小于2个，则返回space

返回值：comma or space

list-separator(1px 2px 3px) => space

list-separator(1px, 2px, 3px) => comma

list-separator('foo') => space

is-bracketed($list)

is-bracketed($list): 判断一个列表是否使用了方括号。

is-bracketed(1px 2px 3px) => false

is-bracketed([1px, 2px, 3px]) => true