sass学习8——内置函数2

列表函数：

length($list)：返回一个列表的长度；
nth( $list,$ n)：返回一个列表中指定的某个标签值；nth()函数和其他语言不同，1是指列表中的第一个便签值，2是指列表中第二个标签值，依此类推；$n必须是大于0的整数。
join( $list1,$ list2,[separator])：将两个列连接在一起，成为一个列表；join只能连接两个列表；$separator参数用来指定列表使用什么方式俩分隔各项，comma(逗号)或space(空格)；
append( $list1,$ val,[$separator])：将某个值放在列表的最后；
zip($lists…)：将几个列表结合成一个多维列表；
index( $list,$ value) ：返回一个值在列表中的位置。

length() 函数:

.test1 {
    content1: length(1px);
    content2: length(1px 2px);
    content3: length(10px 20px (border 1px solid) 2em);
}

生成为：

.test1 {
  content1: 1;
  content2: 2;
  content3: 4; }

nth() 函数:

.test2 {
    content1: nth(10px 20px 30px, 1);
    content2: nth((Helvetica, Arial, sans-serif), 2);
    content3: nth((1px solid red) border-top green, 1);
}

生成为：

.test2 {
  content1: 10px;
  content2: Arial;
  content3: 1px solid red; }

join() 函数:

.test3 {
    content1: join(10px 20px, 30px 40px);
    content2: join((blue, red), (#abc, #def));
 content3: join((blue, red), (#abc, #def), space);
}

转换为：

.test3 {
  content1: 10px 20px 30px 40px;
  content2: blue, red, #abc, #def;
  content3: blue red #abc #def; }

append()函数：

.test4 {
    content1: append(10px 20px, 30px);
    content2: append((10px, 20px), 30px);
    content3: append(green, red);
    content4: append(red, (green, blue));
}

生成为：

.test4 {
  content1: 10px 20px 30px;
  content2: 10px, 20px, 30px;
  content3: green red;
  content4: red green, blue; }

zip()函数：

.test5 {
    content1: zip(1px 2px 3px, solid dashed dotted, green blue red);
}

生成为：

.test5 {
  content1: 1px solid green, 2px dashed blue, 3px dotted red; }

注意啦：使用zip时，每个单元的列表个数值必须相同，否则将会出错。

sass学习8——内置函数2

列表函数：

推荐阅读更多精彩内容