本节我们来看一下 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
中没有指定第三个参数ÿ