Sass学习之路(15)——列表函数(一)

在Sass中，列表函数主要是用来值列表进行一些函数操作。如果一一列举回来，会发现列表函数的种类会比数字函数和字符串函数多很多，所以就分开来写好了。（其实也是因为最近在自己写一些前端的小东西，所以时间有点紧）。

那么回归正题：

1.length()函数：

length()函数和JS中的Array.length的作用基本一样，用来返回一个列表中的值的个数（或者说是列表长度）：

.length{
width:length(5px 88px (border 66px solid) 4em  (border 8em solid));
height:length(border 1px solid);
}

编译结果如下：

.length {

  width: 5;

  height: 3; }

t ips:length()函数中，列表的每个参数之间，要使用空格隔开，使用其他符号分隔是会报错的。

2.nth()函数

nth()函数时用来获取指定列表某个位置的值的。

语法如下：

nth($list,$n)

这里的$list是指要获取的这个值所在的列表，$n就是这个值所在的位置(index);

tip:$n的数字，是从1开始算的，和很多语言中列表从0开始数是不同的哦。

例如：

.nth{
border:nth(border-bottom (4px solid blue) black,2);
}

编译后

.nth {

  border: 4px solid blue; }

3.join()函数

join()函数的作用是将两个列表合并成一个列表。

例如：

.border{
    border-radius:join(10px 20px, 30px 40px);
}

编译结果如下：

.shadow {

  border-radius: 10px 20px 30px 40px; }

tips:一定不能在一个join()函数中放入两个以上的列表，否则会报错。

那么，如果我们想将多个列表合并在一起，则需要使用多个join()函数，例如：

.shadows{
    box-shadow:join(join(10px 20px, 30px 40px),red);
}

编译后如下：

.shadows {

  box-shadow: 10px 20px 30px 40px red; }

tip:join()合并代码时，还有一个规则。那就是如果一个用空格分隔的列表和一个用逗号分隔的列表合并，合并后的列表的分割符号与参数中的第一个列表的符号相同。

例子如下：

.border1{
    border-radius:join((10px,20px),(30px 40px));
}
.border2{
    border-radius:join((10px 20px),(30px,40px));
}

编译后 的Css:

.border1 {

  border-radius: 10px, 20px, 30px, 40px; }


.border2 {

  border-radius: 10px 20px 30px 40px; }

当然，除了遵循上边的规则以外，还可以使用在两个列表后，加入第三个参数来规定合并后的列表的分割符号。

comma代表逗号分隔，space代表空格分隔。

例如：

.color{
    color:join(blue,(red orange),comma);
}
.color2{
    color:join(blue,(red orange),space);
}

编译后的CSS：

.color{
    color:join(blue,(red orange),comma);
}
.color2{
    color:join(blue,(red orange),space);
}

未完待续