Sass sass:list 模块 - 芒果文档

📌 相关文章

📜 Sass sass:list 模块

📅 最后修改于: 2021-08-30 11:58:59 🧑 作者: Mango

SASS 提供了许多内置模块，其中包含各种有用的功能和一些易于使用的 mixin。所有内置模块都以 sass 开头：表示它们与其他模块不同，是 SASS 本身的一部分。内置模块之一是sass:list模块，它可以访问和修改列表中的值。

注意：在 Sass 中，每个映射算作一个列表，其中每个键/值对包含两个元素。例如， (1: 2, 3: 4) 算作 (1 2, 3 4)。所以下面讨论的所有函数都适用于地图和列表。此模块允许您访问和修改列表。

sass:list模块中提供了以下方法：

list.append()：此函数返回列表的副本，在末尾添加给定值。
句法：
```
list.append($list, $val, $separator: auto)
append($list, $val, $separator: auto)
```
如果分隔符是comma ，则返回的列表将以逗号分隔，空格分隔也是如此。如果分隔符是auto (默认分隔符)，返回的列表将使用与列表相同的分隔符(如果列表没有分隔符，则使用空格)。分隔符中不允许有其他值。与list.join()不同，如果值是一个列表，则它嵌套在返回的列表中，而不是将每个元素添加到返回的列表中。

例子：
```
@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); 
```
输出：
```
10px 20px 30px
geeks, for, geeks
10px 20px (30px 40px)
10px, 20px
geeks for geeks
```
list.index()：该函数返回列表中某个值的索引。
句法：
```
list.index($list, $value)
index($list, $value)
```
如果该值未出现在列表中，则该函数返回null 。如果该值在列表中多次出现，则该函数返回该值第一次出现的索引。

例子：
```
@debug list.index(geeks for geeks, geeks); 
@debug list.index(geeks for geeks, for); 
@debug list.index(geeks for geeks, slash_it);  
```
输出：
```
1
2
null
```
list.join()：此函数返回一个新列表，其中包含list1的元素后跟list2的元素。
句法：
```
list.join($list1, $list2, 
    $separator: auto, $bracketed: auto)
join($list1, $list2, 
    $separator: auto, $bracketed: auto)
```
如果分隔符是comma ，则返回的列表将以逗号分隔，空格分隔也是如此。在auto (默认分隔符)的情况下，返回的列表将使用与list1使用的分隔符相同的分隔符，如果它有一个分隔符或list2如果它有一个分隔符，或者空格作为分隔符。分隔符中不允许有其他值。如果bracketed 设置为true，则返回的列表由方括号组成。否则，返回的列表没有任何括号。如果它是auto (默认)，则返回的列表将被括起来。不允许使用其他值。

例子：
```
@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);
```
输出：
```
10px 20px 30px 40px
geeks, for, geeks, gfg
10px 20px
10px, 20px
geeks for geeks gfg
[10px 20px]
[10px 20px]
```

list.length()：该函数返回列表的长度。

句法：

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

此函数还可用于返回映射中的对数。

例子：

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

输出：

1
3
2

list.nth()：此函数返回存在于索引“n”处的列表元素。
句法：
```
list.nth($list, $n)
nth($list, $n)
```
如果n是非正整数，则此函数从列表末尾开始计数。如果索引n处不存在元素，则会引发错误。

例子：
```
@debug list.nth(geeks for geeks, 2);
@debug list.nth([geeks for geeks], 3);
```
输出：
```
for
geeks
```