Sass 列表(List)函數

Sass 函數 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 函數 Sass 函數