Sass 列表函数



  • 列表函数

    列表功能用于访问列表中的值,合并列表以及向列表中添加项目。
    Sass 列表是不可变的(它们不能更改);因此,返回列表的列表函数将返回新列表,而不更改原始列表。
    Sass 列表基于1。 列表中的第一个列表项位于索引1,而不是0。
    下表列出了 Sass 中的所有列表功能:
    函数 描述 & 示例
    append(list, value, [separator])
    将一个值添加到列表的末尾;分隔符可以是自动,逗号或空格;默认为自动。
    示例:
    append((a b c), d)
    返回结果: a b c d
    append((a b c), (d), comma)
    返回结果: a, b, c, d
    index(list, 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的末尾;分隔符可以是自动,逗号或空格;auto是默认值(将使用第一个列表中的分隔符);方括号可以是auto,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个列表元素设置为指定的值。
    示例:
    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