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: 

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

• Output: 

"comma"

• Example 2: 

      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: 

      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: 

      join(1 2 3, 4 5 6)
      

• Output: 

(1 2 3 4 5 6)

• Example 2: 

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

• Output: 

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

• Example 3: 

      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: 

      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: 

      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: 

      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: 

      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: 

      is-bracketed([a b c])
      

• Output: 

true

• Example 2: 

      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: 

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

• Output: 

(1, 2, 3, 4)

• Example 2: 

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

• Output: 

(1 2 3 4)