Skip to content
Related Articles

Related Articles

SASS | List Functions
  • Last Updated : 11 May, 2020

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 devides 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 nth 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 nth 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)



My Personal Notes arrow_drop_up
Recommended Articles
Page :