本节我们来看一下 Sass 中的列表函数，列表函数可以用于处理列表，例如访问列表中的值，返回列表的长度，向列表添加元素，合并列表中的值等。
常用的列表函数如下所示：
| 函数 | 描述 |
|---|---|
| append() | 将单个值添加到列表尾部 |
| index() | 返回元素在列表中的索引 |
| length() | 返回列表的长度 |
| is-bracketed() | 判断列表中是否有中括号 |
| join() | 合并两列表， |
| list-separator() | 返回一列表的分隔符类型，可以是空格 |
| nth() | 获取第 n 项的值 |
| set-nth() | 设置列表第 n 项的值为 value |
| zip() | 将多个列表按照以相同索引值为一组，重新组成一个新的多维度列表 |
append()函数
append() 函数可以用于向列表中添加一个新的元素，此函数的语法如下所示：
append(list, value, [separator])
其中 list 为列表、value 为要新增的元素值，separator 是可选参数，可以指定分隔符，值为comma 表示使用逗号分隔列表。
示例：
.one{
content: append((Tom Mark), XKD);
}
.two{
content: append((a b c), d, comma); // 使用逗号分隔列表
}
编译成 CSS 代码：
.one {
content: Tom Mark XKD;
}
.two {
content: a, b, c, d;
}
可以看到，在上述两个选择器中，.one 中没有指定第三个参数，输出的代码中是以空格分隔列表。而 .two 中给列表添加元素时带有第三个参数 comma，所以输出的 CSS 代码中是以逗号分隔列表。
index()函数
index() 函数可以用于返回元素在列表中的索引，注意哟，Sass 中的索引是从 1 开始的。
示例：
例如我们定义一个列表 $lst，然后分别获取列表中 a 和 d 两个值的索引：
$lst:a b c d e;
.one{
content: index($lst, a);
}
.two{
content: index($lst, d);
}
编译成 CSS 代码：
.one {
content: 1;
}
.two {
content: 4;
}
从输出代码中可以看到， a 的索引为 1， d 的索引为 4。
length()函数
length() 函数可以获取列表的长度。
示例：
例如我们定义两个列表，分别获取两个列表的长度：
$lst1:a b c d e;
$lst2:10 15 21 36 17 6 18;
.one{
content: length($lst1);
}
.two{
content: length($lst2);
}
编译成 CSS 代码：
.one {
content: 5;
}
.two {
content: 7;
}
从输出的 CSS 代码中可以看到 $lst1 的长度为 5，$lst2 的长度为7。其实获取长度很简单，就是列表中有多少个元素，列表的长度就为几。
is-bracketed()函数
is-bracketed() 函数用于判断列表中是否有中括号。如果有中括号则返回 true，如果没有中括号则返回 false。
示例：
.one{
content: is-bracketed([a b c]);
}
.two{
content: is-bracketed(xkd summer iven);
}
编译成 CSS 代码：
.one {
content: true;
}
.two {
content: false;
}
结果很明显，.one 选择器内带有中括号的列表返回的是 true，.two 内没有中括号的列表返回 false。
join()函数
join() 函数用于合并两个列表。函数中带有四个参数，前面个参数为要合并的列表，将第二个参数添加到第二个参数末尾。后两个是可选参数，第三个参数为指定分隔符，第四个参数为判断是否有中括号，可以设置为 true 或 false 两个值。
示例：
$lst1: a b c;
$lst2: 1 2 3;
.one{
content: join($lst1, $lst2, comma);
}
.two{
content: join($lst1, $lst2);
}
编译成 CSS 代码：
.one {
content: a, b, c, 1, 2, 3;
}
.two {
content: a b c 1 2 3;
}
list-separator() 函数
list-separator() 函数用于返回列表的分隔符类型，可以是逗号或者空格。
示例：
$lst1: a b c;
$lst2: 1,2,3;
.one{
content: list-separator($lst1);
}
.two{
content: list-separator($lst2);
}
编译成 CSS 代码：
.one {
content: space;
}
.two {
content: comma;
}
从输出的 CSS 代码中可以看出，列表 $lst1 中的分隔符类型为空格，$lst2 中的分隔符类型为列表。
nth() 函数
nth() 函数用于获取列表中指定索引的值。
示例：
$lst1: a b c;
$lst2: 1,2,3;
.one{
content: nth($lst1, 2);
}
.two{
content: nth($lst2, 2);
}
编译成 CSS 代码：
.one {
content: b;
}
.two {
content: 2;
}
$lst1 中第二项列表的值为 b，$lst2 中第二项列表的值为 2。
set-nth()函数
set-nth() 函数用于设置列表中指定索引的值。将会覆盖原有元素的值。
示例：
例如设置列表中索引为 3 位置的值为 xkd：
.one{
content: set-nth([a b c], 3, xkd);
}
编译后的 CSS 代码：
.one {
content: [a b xkd];
}
可以看到输出结果中，xkd 覆盖了原本的元素值 c。
zip()函数
zip() 函数用于将多个列表按照以相同索引值为一组，重新组成一个新的多维度列表。
示例：
.one{
border:zip(1px 2px 3px,solid dashed dotted,red yellow blue);
}
编译后的 CSS 代码：
.one {
border: 1px solid red, 2px dashed yellow, 3px dotted blue;
}
网友评论