Compatibility:
Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call functions using their global names instead.
In Sass, every map counts as a list that contains a two-element list for each key/value pair. For example, (1: 2, 3: 4) counts as (1 2, 3 4). So all these functions work for maps as well!
Individual values also count as lists. All these functions treat 1px as a list that contains the value 1px.
list.append($list, $val, $separator: auto)
append($list, $val, $separator: auto) Returns a copy of $list with $val added to the end.
If $separator is comma, space, or slash, the returned list is comma-separated, space-separated, or slash-separated, respectively. If it’s auto (the default), the returned list will use the same separator as $list (or space if $list doesn’t have a separator). Other values aren’t allowed.
Note that unlike list.join(), if $val is a list it’s nested within the returned list rather than having all its elements added to the returned list.
@use 'sass:list';
@debug list.append(10px 20px, 30px);
@debug list.append((blue, red), green);
@debug list.append(10px 20px, 30px 40px);
@debug list.append(10px, 20px, $separator: comma);
@debug list.append((blue, red), green, $separator: space);
@use 'sass:list'
@debug list.append(10px 20px, 30px) // 10px 20px 30px
@debug list.append((blue, red), green) // blue, red, green
@debug list.append(10px 20px, 30px 40px) // 10px 20px (30px 40px)
@debug list.append(10px, 20px, $separator: comma) // 10px, 20px
@debug list.append((blue, red), green, $separator: space) // blue red green
list.index($list, $value)
index($list, $value) Returns the index of $value in $list.
If $value doesn’t appear in $list, this returns null. If $value appears multiple times in $list, this returns the index of its first appearance.
list.is-bracketed($list)
is-bracketed($list) Returns whether $list has square brackets.
list.join($list1, $list2, $separator: auto, $bracketed: auto)
join($list1, $list2, $separator: auto, $bracketed: auto) Returns a new list containing the elements of $list1 followed by the elements of $list2.
Because individual values count as single-element lists, it’s possible to use list.join() to add a value to the end of a list. However, this is not recommended, since if that value is a list it will be concatenated, which is probably not what you’re expecting.
Use list.append() instead to add a single value to a list. Only use list.join() to combine two lists together into one.
If $separator is comma, space, or slash, the returned list is comma-separated, space-separated, or slash-separated, respectively. If it’s auto (the default), the returned list will use the same separator as $list1 if it has a separator, or else $list2 if it has a separator, or else space. Other values aren’t allowed.
If $bracketed is auto (the default), the returned list will be bracketed if $list1 is. Otherwise, the returned list will have square brackets if $bracketed is truthy and no brackets if $bracketed is falsey.
@use 'sass:list';
@debug list.join(10px 20px, 30px 40px);
@debug list.join((blue, red), (#abc, #def));
@debug list.join(10px, 20px);
@debug list.join(10px, 20px, $separator: comma);
@debug list.join((blue, red), (#abc, #def), $separator: space);
@debug list.join([10px], 20px);
@debug list.join(10px, 20px, $bracketed: true);
@use 'sass:list'
@debug list.join(10px 20px, 30px 40px) // 10px 20px 30px 40px
@debug list.join((blue, red), (#abc, #def)) // blue, red, #abc, #def
@debug list.join(10px, 20px) // 10px 20px
@debug list.join(10px, 20px, comma) // 10px, 20px
@debug list.join((blue, red), (#abc, #def), space) // blue red #abc #def
@debug list.join([10px], 20px) // [10px 20px]
@debug list.join(10px, 20px, $bracketed: true) // [10px 20px]
list.length($list)
length($list) Returns the length of $list.
This can also return the number of pairs in a map.
list.separator($list)
list-separator($list) Returns the name of the separator used by $list, either space, comma, or slash.
If $list doesn’t have a separator, returns space.
list.nth($list, $n)
nth($list, $n)Returns the element of $list at index $n.
If $n is negative, it counts from the end of $list. Throws an error if there is no element at index $n.
list.set-nth($list, $n, $value)
set-nth($list, $n, $value) Returns a copy of $list with the element at index $n replaced with $value.
If $n is negative, it counts from the end of $list. Throws an error if there is no existing element at index $n.
@use 'sass:list';
@debug list.set-nth(10px 20px 30px, 1, 2em);
@debug list.set-nth(10px 20px 30px, -1, 8em);
@debug list.set-nth((Helvetica, Arial, sans-serif), 3, Roboto);
@use 'sass:list'
@debug list.set-nth(10px 20px 30px, 1, 2em); // 2em 20px 30px
@debug list.set-nth(10px 20px 30px, -1, 8em); // 10px, 20px, 8em
@debug list.set-nth((Helvetica, Arial, sans-serif), 3, Roboto); // Helvetica, Arial, Roboto
list.slash($elements...) Returns a slash-separated list that contains $elements.
This function is a temporary solution for creating slash-separated lists. Eventually, they’ll be written literally with slashes, as in 1px / 2px / solid, but for the time being slashes are used for division so Sass can’t use them for new syntax until the old syntax is removed.
list.zip($lists...)
zip($lists...) Combines every list in $lists into a single list of sub-lists.
Each element in the returned list contains all the elements at that position in $lists. The returned list is as long as the shortest list in $lists.
The returned list is always comma-separated and the sub-lists are always space-separated.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4