兼容性(方括号): Dart Sass ✓ | LibSass since 3.5.0 | Ruby Sass since 3.5.0 LibSass 和 Ruby Sass 的旧实现不支持带方括号的列表。
列表包含一系列其他值。 在 Sass 中，列表中的元素可以用逗号(Helvetica, Arial, sans-serif)、空格(10px 15px 0 0)或 斜杠 只要它在列表中是一致的。 与大多数其他语言不同，Sass 中的列表不需要特殊的括号； 任何用空格或逗号分隔的 expressions 都算作一个列表。 但是，您可以使用方括号 ([line1 line2]) 编写列表，这在使用 grid-template-columns。
Sass 列表可以包含一个甚至零个元素。 单元素列表可以写成 (<expression>,) 或 [<expression>]，零元素列表可以写成 () 或 []。 此外，所有 列表函数 都会将不在列表中的单个值视为包含该值的列表，这意味着您很少需要显式创建单元素列表。
⚠️ 注意！
没有括号的空列表不是有效的 CSS，因此 Sass 不会让您在属性值中使用它。
斜杠分隔的列表
Sass 中的列表可以用斜线分隔，以表示值，例如用于设置“字体大小”和“行高”的font: 12px/30px简写或hsl(80 100% 50% / 0.5)语法 用于创建具有给定不透明度值的颜色。
但是，斜杠分隔的列表目前不能按字面意义书写。 Sass 过去使用 / 字符表示分隔符，因此在现有样式表过渡到使用 math.div() 斜杠分隔的列表只能使用 list.slash() 编写。
有关详细信息，请参阅 重大更改：斜线作为除法。
使用列表
Sass 提供了一些函数，可以使用列表来编写强大的样式库，或者使您的应用程序的样式表更清晰、更易于维护。
索引
其中许多函数采用或返回数字，称为 indexes，它引用列表中的元素。 索引 1 表示列表的第一个元素。 请注意，这与索引从 0 开始的许多编程语言不同！ Sass 还可以轻松引用列表的末尾。 索引 -1 指的是列表中的最后一个元素，-2 指的是倒数第二个元素，依此类推。
访问一个元素
如果不能从中获取值，列表就没有多大用处。 您可以使用 list.nth($list, $n) 函数 获取列表中给定索引处的元素。 第一个参数是列表本身，第二个参数是您要取出的值的索引。
@debug list.nth(10px 12px 16px, 2); // 12px
@debug list.nth([line1, line2, line3], -1); // line3
为每个元素做点什么
这实际上并没有使用函数，但它仍然是使用列表的最常见方式之一。 @each 规则 评估列表中每个元素的样式块，并将该元素分配给一个变量。
$sizes: 40px, 50px, 80px;
@each $size in $sizes {
.icon-#{$size} {
font-size: $size;
height: $size;
width: $size;
}
}
添加到列表
向列表中添加元素也很有用。 list.append($list, $val) 函数 接受一个列表和一个值，并返回列表的副本，并将值添加到末尾。 请注意，由于 Sass 列表是 不可变的，因此它不会修改原始列表。
@debug append(10px 12px 16px, 25px); // 10px 12px 16px 25px
@debug append([col1-line1], col1-line2); // [col1-line1, col1-line2]
在列表中查找元素
如果您需要检查某个元素是否在列表中或找出它的索引，请使用 list.index($list, $value) 函数。 这需要一个列表和一个要在该列表中定位的值，并返回该值的索引。
@debug list.index(1px solid red, 1px); // 1
@debug list.index(1px solid red, solid); // 2
@debug list.index(1px solid red, dashed); // null
如果该值根本不在列表中，list.index() 返回 null。 因为 null 是 falsey，您可以将 list.index() 与 @if 或 if() 检查列表是否包含给定值。
@use "sass:list";
$valid-sides: top, bottom, left, right;
@mixin attach($side) {
@if not list.index($valid-sides, $side) {
@error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
}
// ...
}
不变性
Sass 中的列表是 不可变的，这意味着列表值的内容永远不会改变。 Sass 的列表函数都返回新列表而不是修改原始列表。
不变性有助于避免在样式表的不同部分共享同一列表时可能潜入的许多偷偷摸摸的错误。
不过，您仍然可以通过将新列表分配给同一变量来随着时间的推移更新您的状态。 这通常用于函数和混合中，以将一堆值收集到一个列表中。
@use "sass:list";
@use "sass:map";
$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms);
@function prefixes-for-browsers($browsers) {
$prefixes: ();
@each $browser in $browsers {
$prefixes: list.append($prefixes, map.get($prefixes-by-browser, $browser));
}
@return $prefixes;
}
@debug prefixes-for-browsers("firefox" "ie"); // moz ms
参数列表
当您声明采用 任意参数 的 mixin 或函数时，您获得的值是一个称为 argument list 的特殊列表。 它就像一个包含传递给混合或函数的所有参数的列表，具有一个额外的功能：如果用户传递关键字参数，则可以通过将参数列表传递给 meta.keywords( ) 函数。
@use "sass:meta";
@mixin syntax-colors($args...) {
@debug meta.keywords($args);
// (string: #080, comment: #800, variable: #60b)
@each $name, $color in meta.keywords($args) {
pre span.stx-#{$name} {
color: $color;
}
}
}
@include syntax-colors(
$string: #080,
$comment: #800,
$variable: #60b,
)