Let’s get started.
List Functions in Sass
Sass list functions are used to manipulate lists such as evaluate list values, join lists, or insert items in a list. However, Sass lists are rigid and do not render any change, therefore, the list functions that fetch a new list do not alter the original one.
Like strings, Sass lists are also 1-based which means that the first list item gets stored at index 1 rather than 0.
1. append(list,value, [separator]) function
This function attaches a single value at the end of the list. A separator can render values such as auto(default), comma, or space.
Example
Output
If space is used.
Example
Output
2. index(list,value) function
This function fetches the index position of the value specified in the list.
Example
Output
3. is-bracketed(list) function
This function evaluates if the given list consists of square brackets or not. The result is in the form of true or false.
Example
Output
If there are no square brackets.
Example
Output
4. join(list1, list2, [separator, bracketed]) function
This function attaches the second list provided at the end of the first given list. A separator can render values such as auto(default), comma, or space, meanwhile, the bracketed can exhibit auto(default), true, or false values.
Example
Output
When a separator is used.
Example
Output
When a bracketed is used.
Example
Output
5. length(list) function
For the purpose of fetching the length of the list, this function is utilized.
Example
Output
6. list-separator(list) function
This function fetches the separator used in the list as a string.
Example
Output
7. nth(list,n) function
In order to fetch the nth element specified in the list this function is utilized.
Example
Output
8. set-nth(list,n,value) function
This function gives the value specified to the nth number in the list.
Example
Output
9. zip(lists) function
This function joins all the lists defined into one multidimensional list.
Example
Output
Now that we have learned about list functions, we shall now move to our next topic of discussion.
Map Functions in Sass
Maps in Sass consist of multiple key-value pairs that can be evaluated using map functions. Moreover, you can also use list functions to examine maps in Sass, however, when doing so maps will be considered as lists with two elements.
Just like lists, maps in Sass are rigid and do not exhibit any change; therefore, the map functions that fetch a new map do not alter the original one.
1. map-get(map,key) function
This function fetches the value linked to the key defined in the map.
Example
map-get($color, “purple”)
Output
2. map-has-key(map,key) function
This function evaluates if the key defined is present in the map or not and provides the result in either true or false.
Example
map-has-key($color, “yellow”)
Output
3. map-keys(map) function
This function fetches all the keys in a map.
Example
map-keys($color)
Output
4. map-merge(map1,map2) function
In order to attach map2 at the end of map1 this function is used.
Example
$color1: (“pink”:#ffc0cb , “brown”: #964b00)
map-merge($color, $color1)
Output
5. map-remove(map,keys…) function
This function eliminates all the stated keys from the map.
Example
map-remove($color, “brown”)
Output
6. map-values(map) function
This function fetches all the values present in the map.
Example
map-values($color)
Output
Conclusion
Sass list functions are used to manipulate lists such as evaluate list values, join lists, or insert items in a list. Meanwhile, maps in Sass consist of multiple key-value pairs that can be evaluated using map functions. Both lists and maps are rigid and do not exhibit any change; therefore, any function that fetches a new list or map does not alter the original one. All the functions associated with lists and maps in Sass are explained in this article along with examples.
