Sass List Functions
- Previous Page Sass Numeric
- Next Page Sass Map
Sass List Functions
List functions are used to access values in the list, combine lists, and add items to the list.
Sass lists are immutable (they cannot be changed). Therefore, list functions that return a list return a new list without changing the original list.
Sass lists are based on 1. The first item in the list is at index 1, not 0.
The following lists all the list functions in Sass:
| Function | Description & Example |
|---|---|
| append(list, value, [separator]) |
Add a single value to the end of the list. 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) |
Return the index position of the value in the list. Example:index(a b c, b) Result: 2 index(a b c, f) Result: null |
| is-bracketed(list) |
Check if the list has brackets. Example:is-bracketed([a b c]) Result: true is-bracketed(a b c) Result: false |
| join(list1, list2, [separator, bracketed) |
to list2 appended to list1 at the end. 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) |
Return the length of the list. Example:length(a b c) Result: 3 |
| list-separator(list) |
Return the list separator used as a string. It can be space or comma. Example:list-separator(a b c) Result: "space" list-separator(a, b, c) Result: "comma" |
| nth(list, n) |
Return the n-th element in the list. Example:nth(a b c, 3) Result: c |
| set-nth(list, n, value) |
Set the n-th list element to the specified value. Example:set-nth(a b c, 2, x) Result: a x c |
| zip(lists) |
Combine lists into a single multidimensional list. Example:zip(1px 2px 3px, solid dashed dotted, red green blue) Result: 1px solid red, 2px dashed green, 3px dotted blue |
- Previous Page Sass Numeric
- Next Page Sass Map
