Skip to content
Related Articles

Related Articles

Improve Article
SASS | List Functions
  • Last Updated : 02 Jun, 2021

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 nth 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 nth 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)
My Personal Notes arrow_drop_up
Recommended Articles
Page :