Sass List Functions
Sass List Functions are used to manipulate lists, allowing you to access values within a list, add elements to a list, and merge lists, among other operations.
Sass lists are immutable, so when processing lists, a new list is returned instead of modifying the original list.
The starting index value for lists is 1, not 0.
The following table lists Sass list functions:
| Function | Description & Example |
|---|---|
| append(list, value, [separator]) | Adds a single value to the end of the list. The separator is optional, defaulting to automatic detection, or can be specified as a comma or space. <br> <br> Example: append((a b c), d) <br> Result: a b c d <br> append((a b c), (d), comma) <br> Result: a, b, c, d |
| index(list, value) | Returns the index position of the value in the list. <br> <br> Example: <br> index(a b c, b) <br> Result: 2 <br> index(a b c, f) <br> Result: null |
| is-bracketed(list) | Checks if the list is bracketed. <br> <br> Example: <br> is-bracketed([a b c]) <br> Result: true <br> is-bracketed(a b c) <br> Result: false |
| join(list1, list2, [separator, bracketed]) | Merges two lists, appending list2 to the end of list1. The separator is optional, defaulting to automatic detection, or can be specified as a comma or space. Bracketed is optional, defaulting to automatic detection, or can be set to true or false. <br> <br> Example: <br> join(a b c, d e f) <br> Result: a b c d e f <br> join((a b c), (d e f), comma) <br> Result: a, b, c, d, e, f <br> join(a b c, d e f, $bracketed: true) <br> Result: [a b c d e f] |
| length(list) | Returns the length of the list. <br> <br> Example: <br> length(a b c) <br> Result: 3 |
| list-separator(list) | Returns the type of separator used in the list, which can be a space or a comma. <br> <br> Example: <br> list-separator(a b c) <br> Result: "space" <br> list-separator(a, b, c) <br> Result: "comma" |
| nth(list, n) | Retrieves the value of the nth item. <br> <br> Example: <br> nth(a b c, 3) <br> Result: c |
| set-nth(list, n, value) | Sets the value of the nth item in the list to the specified value. <br> <br> Example: <br> set-nth(a b c, 2, x) <br> Result: a x c |
| zip(lists) | Combines multiple lists into a new multidimensional list, grouping items by their index. <br> <br> Example: <br> zip(1px 2px 3px, solid dashed dotted, red green blue) <br> Result: 1px solid red, 2px dashed green, 3px dotted blue |