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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @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); 

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @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);

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

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

    Syntax:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    for
    geeks
    



  • My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.