sass列表函数
列表函数简介
列表函数主要包括一些对列表参数的函数使用，主要包括以下几种：
- length($list)：返回一个列表的长度值；
- nth($list, $n)：返回一个列表中指定的某个标签值
- join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
- append($list1, $val, [$separator])：将某个值放在列表的最后；
- zip($lists…)：将几个列表结合成一个多维的列表；
- index($list, $value)：返回一个值在列表中的位置值。
列表函数中的每个函数都有其独特的作用与功能，接下来我们通过命令终端向大家展示每个列表函数的功能与使用。
length()函数
length() 函数主要用来返回一个列表中有几个值，简单点说就是返回列表清单中有多少个值：
>> length(10px) 1 >> length(10px 20px (border 1px solid) 2em) 4 >> length(border 1px solid) 3
length() 函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错：
>> length(10px,20px,(border 1px solid),2em) SyntaxError: wrong number of arguments (4 for 1) for `length' >> length(1,2px) SyntaxError: wrong number of arguments (2 for 1) for `length'
nth()函数
语法:
nth($list,$n)
nth() 函数用来指定列表中某个位置的值。不过在 Sass 中，nth() 函数和其他语言不同，1 是指列表中的第一个标签值，2 是指列给中的第二个标签值，依此类推。如：
>> nth(10px 20px 30px,1) 10px >> nth((Helvetica,Arial,sans-serif),2) "Arial" >> nth((1px solid red) border-top green,1) (1px "solid" #ff0000)
注：在 nth($list,$n) 函数中的 $n 必须是大于 0 的整数：
>> nth((1px solid red) border-top green 1 ,0) SyntaxError: List index 0 must be a non-zero integer for `nth'
join()函数
join() 函数是将两个列表连接合并成一个列表。
>> join(10px 20px, 30px 40px) (10px 20px 30px 40px) >> join((blue,red),(#abc,#def)) (#0000ff, #ff0000, #aabbcc, #ddeeff) >> join((blue,red),(#abc #def)) (#0000ff, #ff0000, #aabbcc, #ddeeff)
不过 join() 只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错：
>> join((blue red),(#abc, #def),(#dee #eff)) SyntaxError: $separator: (#ddeeee #eeffff) is not a string for `join'
但很多时候不只碰到两个列表连接成一个列表，这个时候就需要将多个 join() 函数合并在一起使用：
>> join((blue red), join((#abc #def),(#dee #eff))) (#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)
在 join() 函数中还有一个很特别的参数 $separator，这个参数主要是用来给列表函数连接列表值是，使用的分隔符号，默认值为 auto。
join() 函数中 $separator 除了默认值 auto 之外，还有 comma 和 space 两个值，其中 comma 值指定列表中的列表项值之间使用逗号（,）分隔，space 值指定列表中的列表项值之间使用空格（ ）分隔。
在 join() 函数中除非明确指定了 $separator值，否则将会有多种情形发生：
如果列表中的第一个列表中每个值之间使用的是逗号（,），那么 join() 函数合并的列表中每个列表项之间使用逗号,分隔：
>> join((blue, red, #eff),(green orange)) (#0000ff, #ff0000, #eeffff, #008000, #ffa500)
但当第一个列表中只有一个列表项，那么 join() 函数合并的列表项目中每个列表项目这间使用的分隔符号会根据第二个列表项中使用的，如果第二列表项中使用是,分隔，则使用逗号分隔；如果第二列项之间使用的空格符，则使用空格分隔：
>> join(blue,(green, orange)) (#0000ff, #008000, #ffa500) >> join(blue,(green orange)) (#0000ff #008000 #ffa500)
如果列表中的第一个列表中每个值之间使用的是空格，那么 join() 函数合并的列表中每个列表项之间使用空格分隔：
>> join((blue green),(red,orange)) (#0000ff #008000 #ff0000 #ffa500) >> join((blue green),(red orange)) (#0000ff #008000 #ff0000 #ffa500)
如果当两个列表中的列表项小于1时，将会以空格分隔：
>> join(blue,red) (#0000ff #ff0000)
如此一来，会有多种情形发生，造成使用混乱的情形，如果你无法记得，什么时候会是用逗号分隔合并的列表项，什么时候是使用空格分隔合并 的列表项，在些建议大家使用 join() 函数合并列表项的时候就明确指定 $separator 参数，用来指定合并的列表中使用什么方式来分隔列表项：
>> join(blue,red,comma)
(#0000ff, #ff0000)
>> join(blue,red,space)
(#0000ff #ff0000)
>> join((blue green),(red,orange),comma)
(#0000ff, #008000, #ff0000, #ffa500)
>> join((blue green),(red,orange),space)
(#0000ff #008000 #ff0000 #ffa500)
>> join((blue, green),(red,orange),comma)
(#0000ff, #008000, #ff0000, #ffa500)
>> join((blue, green),(red,orange),space)
(#0000ff #008000 #ff0000 #ffa500)
>> join(blue,(red,orange),comma)
(#0000ff, #ff0000, #ffa500)
>> join(blue,(red,orange),space)
(#0000ff #ff0000 #ffa500)
>> join(blue,(red orange),comma)
(#0000ff, #ff0000, #ffa500)
>> join(blue,(red orange),space)
(#0000ff #ff0000 #ffa500)
append()函数
append() 函数是用来将某个值插入到列表中，并且处于最末位。
>> append(10px 20px ,30px) (10px 20px 30px) >> append((10px,20px),30px) (10px, 20px, 30px) >> append(green,red) (#008000 #ff0000) >> append(red,(green,blue)) (#ff0000 (#008000, #0000ff))
如果没有明确的指定 $separator 参数值，其默认值是 auto。
- 如果列表只有一个列表项时，那么插入进来的值将和原来的值会以空格的方式分隔。
- 如果列表中列表项是以空格分隔列表项，那么插入进来的列表项也将以空格分隔；
- 如果列表中列表项是以逗号分隔列表项，那么插入进来的列表项也将以逗号分隔。
当然，在 append() 函数中，可以显示的设置 $separator 参数，
- 如果取值为 comma 将会以逗号分隔列表项
- 如果取值为 space 将会以空格分隔列表项
>> append((blue green),red,comma) (#0000ff, #008000, #ff0000) >> append((blue green),red,space) (#0000ff #008000 #ff0000) >> append((blue, green),red,comma) (#0000ff, #008000, #ff0000) >> append((blue, green),red,space) (#0000ff #008000 #ff0000) >> append(blue,red,comma) (#0000ff, #ff0000) >> append(blue,red,space) (#0000ff #ff0000)
zip()函数
zip()函数将多个列表值转成一个多维的列表：
>> zip(1px 2px 3px,solid dashed dotted,green blue red) ((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))
在使用zip()函数时，每个单一的列表个数值必须是相同的：
>> zip(1px 2px 3px, solid , green blue red) NoMethodError: undefined method `options=' for nil:NilClass Use --trace for backtrace.
否则将会出错。
zip()函数中每个单一列表的值对应的取其相同位置值：
|--- List ---|--- nth(1) ---|--- nth(2) ---|--- nth(3) ---|
|------------|--------------|--------------|--------------|
| List1 | 1px | 2px | 3px |
|------------|--------------|--------------|--------------|
| List2 | solid | dashed | dotted |
|------------|--------------|--------------|--------------|
| List3 | green | blue | red |
|------------|--------------|--------------|--------------|
zip()函数组合出来就成了：
1px solid green, 2px dashed blue, 3px dotted red
index()函数
index() 函数类似于索引一样，主要让你找到某个值在列表中所处的位置。在 Sass 中，第一个值就是1，第二个值就是 2，依此类推：
>> index(1px solid red, 1px) 1 >> index(1px solid red, solid) 2 >> index(1px solid red, red) 3
在 index() 函数中，如果指定的值不在列表中（没有找到相应的值），那么返回的值将是 false，相反就会返回对应的值在列表中所处的位置。
>> index(1px solid red,dotted) //列表中没有找到 dotted false >> index(1px solid red,solid) //列表中找到 solid 值，并且返回他的位置值 2 2
