Sass 列表函數

Sass 列表函數

列表函數用于訪問列表中的值、組合列表以及向列表添加項目。

Sass 列表是不可變的(它們無法改變)。因此,返回列表的列表函數會返回新列表,而不會更改原始列表。

Sass 列表是基于 1 的。列表中的第一個列表項位于索引 1,而不是 0。

下面列出了 Sass 中的所有列表函數:

函數 描述 & 例子
append(list, value, [separator])

將單個值添加到列表的末尾。
分隔符可以是 auto、comma 或 space。auto 是默認值。

實例:

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、comma 或 space。
auto 是默認值(將使用第一個列表中的分隔符)。
bracketed 可以是 auto、true 或 false。auto 是默認值。

實例:

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)

以字符串形式返回所用的列表分隔符。可以是 space 或 comma。

實例:

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