Lzh on GitHub

列表

列表包含一系列其他值。在 Sass 中，列表中的元素可以用逗号（Helvetica, Arial, sans-serif）、空格（10px 15px 0 0）或斜杠分隔，只要在列表内保持一致即可。与大多数其他语言不同，Sass 中的列表不需要特殊的括号；任何用空格或逗号分隔的表达式都算作一个列表。但是，你也可以用方括号来编写列表（[line1 line2]），这在使用 grid-template-columns 时很有用。

列表包含一系列其他值。在 Sass 中，列表中的元素可以用逗号（Helvetica, Arial, sans-serif）、空格（10px 15px 0 0）或斜杠分隔，只要在列表内保持一致即可。与大多数其他语言不同，Sass 中的列表不需要特殊的括号；任何用空格或逗号分隔的表达式都算作一个列表。但是，你也可以用方括号来编写列表（[line1 line2]），这在使用 grid-template-columns 时很有用。

在编写不带括号的列表时，你可以使用圆括号来嵌套列表或消除列表分隔符与空格或逗号的其他用途之间的歧义。例如，(1, 2), (3, 4) 是一个包含两个列表的列表，每个列表都包含两个数字；adjust-font-stack((Helvetica, Arial, sans-serif)) 则将包含三个字体名称的单个参数传递给 adjust-font-stack 函数。

Sass 列表可以包含一个甚至零个元素。一个单元素列表可以写成 (<expression>,) 或 [<expression>]，一个零元素列表可以写成 () 或 []。此外，所有列表函数都会将不在列表中的单个值视为包含该值的列表，这意味着你很少需要显式创建单元素列表。

不带括号的空列表在 CSS 中是无效的，所以 Sass 不允许你在属性值中使用它。

斜杠分隔的列表

Sass 中的列表可以用斜杠分隔，以表示像 font: 12px/30px 这样的速记值，用于设置 font-size 和 line-height，或者像 hsl(80 100% 50% / 0.5) 这样的语法，用于创建带有给定不透明度值的颜色。然而，斜杠分隔的列表目前不能直接字面量地书写。Sass 历来使用 / 字符来表示除法，因此在现有样式表过渡到使用 math.div() 之前，斜杠分隔的列表只能使用 list.slash() 来书写。

有关更多详细信息，请参见重大变更：斜杠作为除法。

使用列表

Sass 提供了许多函数，可以让你使用列表来编写强大的样式库，或者使你的应用程序样式表更整洁、更易于维护。

索引

其中许多函数接受或返回数字，称为索引，它们引用列表中的元素。索引 1 表示列表的第一个元素。请注意，这与许多索引从 0 开始的编程语言不同！Sass 也使得引用列表的末尾变得容易。索引 -1 指的是列表中的最后一个元素，-2 指的是倒数第二个，以此类推。

访问元素

如果你无法从列表中获取值，列表就没有多大用处。你可以使用 list.nth($list, $n) 函数来获取列表中给定索引处的元素。第一个参数是列表本身，第二个参数是你想要获取的值的索引。

@use 'sass:list';

@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) 函数。它接受一个列表和一个要在该列表中定位的值，并返回该值的索引。

@use 'sass:list';

@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 是假值，你可以将 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

参数列表

当你声明一个接受任意参数的混合宏或函数时，你得到的值是一个特殊的列表，称为参数列表。它的作用就像一个包含传递给混合宏或函数的所有参数的列表，还有一个额外功能：如果用户传递了关键字参数，可以通过将参数列表传递给 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,
)