SASS | List Functions

The SASS list functions are used to modify new lists. The lists need to be created inside circular brackets in order to differentiate from others. SASS list can not be changed hence in some cases new lists are created.
Just like the string functions, SASS lists are one-based (not zero-based) indexed meaning the first element of a string is present at index 1 (not at index 0). 

The following lists represents the all list functions in SASS:

1. list-separator($list) function: This function returns the name of the separator used in the list as a string. 

• Example 1:

CSS

list-separator((1, 2, 3))

• Output:

"comma"

• Example 2:

CSS

list-separator((1 2 3))

• Output:

"space"

2. zip($lists) function: This function divides the values of the lists given into a single multi-dimensional list. 

• Example:

CSS

zip(1px 2px 3px, solid dashed dotted, red green blue)

• Output:

1px solid red, 2px dashed green, 3px dotted blue

3. join($list1, $list2, [$separator]) function: This function appends $list2 to the end of $list1. The separator argument could contain the values “comma, space or auto”. The auto value, which is also the default value, will use the separator in the first list. 

• Example 1:

CSS

join(1 2 3, 4 5 6)

• Output:

(1 2 3 4 5 6)

• Example 2:

CSS

join((1, 2, 3), (4 5 6), comma)

• Output:

(1, 2, 3, 4, 5, 6)

• Example 3:

CSS

join((1, 2, 3), (4 5 6), space)

• Output:

(1 2 3 4 5 6)

4. nth($list, $n) function: This function returns the n^th element of the list. 

• Example:

CSS

nth(5 4 6 7 8 9 1, 4)

• Output:

7

5. set-nth($list, $n, $value) function: This function sets the n^th element of the list to the value provided. 

• Example:

CSS

set-nth(5 4 6 7 8 9 1, 3, 5)

• Output:

(5 4 5 7 8 9 1)

6. index($list, $value) function: This function returns the element at the specific index position called by value. 

• Example:

CSS

index((5 6 4 2 3 9 7), 4)

• Output:

2

7. length($list) function: This function returns the number of elements in the list. 

• Example:

CSS

length(5 4 6 7 8 9 1)

• Output:

7

8. is-bracketed($list) function: This function checks whether the list has any square brackets or not. 

• Example 1:

CSS

is-bracketed([a b c])

• Output:

true

• Example 2:

CSS

is-bracketed(a b c)

• Output:

false

9. append($list1, $val, [$separator]) function: This function appends a single value provided to the end of the list. If the separator argument is provided (“auto” being the default separator), the complete list will follow the separator function. 

• Example 1:

CSS

append((1, 2, 3), 4, comma)

• Output:

(1, 2, 3, 4)

• Example 2:

CSS

append((1, 2, 3), 4, space)

• Output:

(1 2 3 4)