Sass 列表（List）函数

本节我们来看一下 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;
}

链接：https://www.9xkd.com/