非常教程

Sass参考手册

Sass 列表(List)函数

Sass 列表(List)函数

Sass 列表(List)函数

Sass 列表(List)函数

Sass 函数

Sass 列表(List)函数用于处理列表,可以访问列表中的值,向列表添加元素,合并列表等。

Sass 列表是不可变的,因此在处理列表时,返回的是一个新的列表,而不是在原有的列表上进行修改。

列表的起始索引值为 1,记住不是 0。

下表列出了 Sass 的列表函数:

函数 描述 & 实例
append(list, value, [separator]) 将单个值 value 添加到列表尾部。separator 是分隔符,默认会自动侦测,或者指定为逗号或空格。

实例:
append((a b c), d)
结果: a b c d
append((a b c), (d), comma)
结果: a, b, c, d
index(list, value) 返回元素 value 在列表中的索引位置。

实例:
index(a b c, b)
结果: 2
index(a b c, f)
结果: null
is-bracketed(list) 判断列表中是否有中括号

实例:
is-bracketed([a b c])
结果: true
is-bracketed(a b c)
结果: false
join(list1, list2, [separator, bracketed]) 合并两列表,将列表 list2 添加到列表 list1 的末尾。separator 是分隔符,默认会自动侦测,或者指定为逗号或空格。 bracketed 默认会自动侦测是否有中括号,可以设置为 true 或 false。

实例:
join(a b c, d e f)
结果: a b c d e f
join((a b c), (d e f), comma)
结果: a, b, c, d, e, f
join(a b c, d e f, $bracketed: true)
结果: [a b c d e f]
length(list) 返回列表的长度

实例:
length(a b c)
结果: 3
list-separator(list) 返回一列表的分隔符类型。可以是空格或逗号。

实例:
list-separator(a b c)
结果: "space"
list-separator(a, b, c)
结果: "comma"
nth(list, n) 获取第 n 项的值。

实例:
nth(a b c, 3)
结果: c
set-nth(list, n, value) 设置列表第 n 项的值为 value

实例:
set-nth(a b c, 2, x)
结果: a x c
zip(lists) 将多个列表按照以相同索引值为一组,重新组成一个新的多维度列表。

实例:
zip(1px 2px 3px, solid dashed dotted, red green blue)
结果: 1px solid red, 2px dashed green, 3px dotted blue

Sass 列表(List)函数

Sass 函数

Sass 列表(List)函数
Sass

Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

主页 http://sass-lang.com/
源码 https://github.com/sass/sass
发布版本 3.5.3