Sass list functions enable accessing values within lists, merging lists, and appending items to lists. These functions operate on immutable lists, meaning they create and return new lists rather than modifying the original.
Notably, Sass lists are 1-indexed, where the first item in a list is located at index 1, diverging from the conventional 0-based indexing.
Below is a comprehensive table listing all the list functions available in Sass:
|
Function |
Description |
Examples |
Result |
|
length($list) |
Determines the count of elements within a list. |
length(1 2 3) |
3 |
|
nth($list, $n) |
Retrieves the element at the nth position within a list. |
nth(1 2 3, 2) |
2 |
|
set-nth($list, $n, $value) |
Assigns the value provided to the nth element in a list. |
set-nth(1 2 3, 2, 5) |
(1 5 3) |
|
join($list1, $list2, [$separator]) |
Concatenates $list2 to the end of $list1. The $separator parameter may include the values comma, space, or auto. By default, auto utilizes the separator defined in the first list. |
join(1 2 3, 4 5 6) |
(1 2 3 4 5 6) |
|
join((1, 2, 3), (4 5 6), auto) |
(1, 2, 3, 4, 5, 6) |
||
|
join((1, 2, 3), (4 5 6), space) |
(1 2 3 4 5 6) |
||
|
append($list1, $val, [$separator]) |
Adds a singular value to the end of a list. If a $separator parameter is specified (with auto being the default), the resulting list will adopt that separator throughout. |
append((1, 2, 3), 4) |
(1, 2, 3, 4) |
|
append((1, 2, 3), 4, space) |
(1 2 3 4) |
||
|
zip($lists) |
Combines the values from the given lists into a single multi-dimensional list by interleaving them. |
zip((red, green, blue), (10px, 15px, 5px)) |
((#ff0000 10px), (#00ff00 15px), (#0000ff 5px)) |
|
index($list, $value) |
Retrieves the element positioned at the index specified by the value of $value. |
index((1 2 3), 2) |
2 |
|
list-separator($list) |
Returns the string representation of the separator utilized in a list. |
list-separator((1, 2, 3)) |
“comma” |
|
list-separator((1 2 3)) |
“space |
