Sass sass:list Module

SASS provides many built-in modules that contain various useful functions and some mixins that makes it easy to use. All built-in modules begin with sass: to show that they are different from other modules and a part of SASS itself. One of the built-in modules is the sass:list module that makes it possible to access and modify values in a list.

Note: In Sass, each map counts as a list containing two elements for each key/value pair. For example, (1: 2, 3: 4) counts as (1 2, 3 4). So all the below discussed functions work for maps as well as lists. This module lets you access and modify lists.

The following methods are available in the sass:list module:

• list.append(): This function returns a copy of list with the given value added to the end.

  Syntax:

  
  
  

  list.append($list, $val, $separator: auto)
  append($list, $val, $separator: auto)

  If the separator is a comma, then the list returned will be comma-separated, and the same goes for space-separated. In case the separator is auto (default separator), the returned list will use the same separator as used by the list (or space if the list doesn’t have a separator). No other value is allowed in the separator. Unlike list.join(), if the value is a list, then it is nested within the returned list rather than adding each element to the returned list.

  Example:

  @debug list.append(10px 20px, 30px);
  @debug list.append((geeks, for), geeks);
  @debug list.append(10px 20px, 30px 40px);
  @debug list.append(10px, 20px, $separator: comma);
  @debug list.append((geeks, for), geeks, $separator: space);

  Output:

  10px 20px 30px
  geeks, for, geeks
  10px 20px (30px 40px)
  10px, 20px
  geeks for geeks
  

• list.index(): This function returns the index of a value in the list.

  Syntax:

  list.index($list, $value)
  index($list, $value)

  In case the value does not appear in the list, the function returns null. If the value appears multiple times in the list, the function returns the index of the first appearance of the value.

  Example:

  @debug list.index(geeks for geeks, geeks);
  @debug list.index(geeks for geeks, for);
  @debug list.index(geeks for geeks, slash_it);

  Output:

  1
  2
  null
  

• list.join(): This function returns a new list which has the elements of list1 followed by the elements of list2.

  Syntax:

  list.join($list1, $list2,
      $separator: auto, $bracketed: auto)
  join($list1, $list2,
      $separator: auto, $bracketed: auto)

  If the separator is comma, then the list returned will be comma-separated, and same goes for space-separated. In case of auto (default separator), the returned list will use the same separator as used by the list1, if it has a separator or list2 if it has a separator, or else space as the separator. No other value is allowed in the separator. If bracketed is set to true, then the returned list consists of square brackets. Otherwise, the returned list does not have any brackets. If it is auto (default), then the returned list will be bracketed. No other values are allowed.

  Example:

  @debug list.join(10px 20px, 30px 40px);
  @debug list.join((geeks, for), (geeks, gfg));
  @debug list.join(10px, 20px);
  @debug list.join(10px, 20px, $separator: comma);
  @debug list.join((geeks, for),
      (geeks, gfg), $separator: space);
  @debug list.join([10px], 20px);
  @debug list.join(10px, 20px, $bracketed: true);

  Output:

  10px 20px 30px 40px
  geeks, for, geeks, gfg
  10px 20px
  10px, 20px
  geeks for geeks gfg
  [10px 20px]
  [10px 20px]
  

• list.length(): This function returns the length of the list.

  Syntax:

  list.length($list)
  length($list)

  This function can also be used to return the number of pairs in a map.

  Example:

  @debug list.length(geeks);
  @debug list.length(geeks for geeks);
  @debug list.length((gfg: geeksforgeeks,
              slash_it: Shivam));

  Output:

  1
  3
  2
  

• list.nth(): This function returns the element of the list present at index “n”.

  Syntax:

  list.nth($list, $n)
  nth($list, $n)

  If n is a non-positive integer, this function counts from the end of list. It throws an error if no element is present at index n.

  Example:

  @debug list.nth(geeks for geeks, 2);
  @debug list.nth([geeks for geeks], 3);

  Output:

  for
  geeks