Sass List Functions
Sass FunctionsSass list functions are used to process lists, including accessing values in a list, adding elements to a list, merging lists, and so on.
Sass lists are immutable, so when processing lists, a new list is returned rather than modifying the original list.
The starting index value of a list is 1; remember, it is not 0.
The following table lists the Sass list functions:
| Function | Description & Example |
|---|---|
| append(list, value, [separator]) | Adds a single valuevalueto the end of the list.separatoris the separator; it is automatically detected by default, or can be 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 |
| index(list, value) | Returns the element'svalueindex position in the list. Example: index(a b c, b) Result: 2 index(a b c, f) Result: null |
| is-bracketed(list) | Determines whether a list has brackets Example: is-bracketed([a b c]) Result: true is-bracketed(a b c) Result: false |
| join(list1, list2, [separator, bracketed]) | Merges two lists, adding the listlist2to the listlist1at the end.separatoris the separator; it is automatically detected by default, or can be specified as a comma or space.bracketedIt automatically detects whether there are brackets, and 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] |
| length(list) | Returns the length of a list Example: length(a b c) Result: 3 |
| list-separator(list) | Returns the separator type of a list. It can be space or comma. Example: list-separator(a b c) Result: "space" list-separator(a, b, c) Result: "comma" |
| nth(list, n) | Gets thenvalue of the item. Example: nth(a b c, 3) Result: c |
| set-nth(list, n, value) | Sets thenitem's value tovalue。 Example: set-nth(a b c, 2, x) Result: a x c |
| zip(lists) | Groups multiple lists by the same index value to form a new multi-dimensional list. Example: zip(1px 2px 3px, solid dashed dotted, red green blue) Result: 1px solid red, 2px dashed green, 3px dotted blue |
Other Extensions