Sass list function
The Sass list (List) function is used to process lists, access values in lists, add elements to lists, merge lists, and so on.
The Sass list is immutable, so when you process the list, a new list is returned instead of being modified on the original list.
The starting index of the list is 1, and remember that it is not 0.
The following table lists the list functions of Sass:
Function |
Description & example |
|---|---|
|
Add a single value value to the end of the list. Separator is a delimiter and is automatically detected by default, or specified as a comma or space. Example: append ((a b c), d) result: a b c d append ((a b c), (d), comma) result: a, b, c, d |
|
Returns the index position of the element value in the list. Example: index (a b c, b) result: 2 index (a b c, f) result: null |
|
Determine whether there are brackets in the list Example: is-bracketed ( [a b c] ) result: true is-bracketed (a b c) result: false |
|
Merge the two lists and add the list list2 to the end of the list list1. Separator is a delimiter and is automatically detected by default, or specified as a comma or space. By default, bracketed automatically detects whether there are square brackets, which can be set to true or false. Example: join (a b c, d e f) result: a b c d e f join ((a b c), (d e f), comma) result: a, b, c, d, e, f join (a b c, d e f, $bracketed: true) result: [a b c d e f] |
|
Returns the length of the list Example: length (a b c) result: 3 |
|
Returns the delimiter type of a list. It can be a space or a comma. Example: list-separator (a b c) result: “space” list-separator (a, b, c) result: “comma” |
|
Gets the value of item n. Example: nth (a b c, 3) result: C |
|
Set the value of item n of the list to value. Example: set-nth (a b c, 2, x) result: a x c |
|
Reassemble multiple lists into a new multi-dimensional list with the same index values. Example: zip (1px 2px 3px, solid dashed dotted, red green blue) result: 1px solid red, 2px dashed green, 3px dotted blue |