Sass 列表

发表 admin at 2024年8月26日

类别

未分类

标签

Sass 中的列表非常简单，就是存储在变量中的一系列项目。使用列表可以将单词或关键字放在一起。然后，您可以使用 nth() 函数访问其中任何项目。

列表可以用空格或逗号分隔，列表项可以不加引号，用单引号 ' 或双引号 " 括起来。（注意：如果确实用引号括起来，则需要使用 unquote() 函数将其删除：

$colours: red green blue;
$padding: '10px', '20px', '30px';
$border: "solid" "dotted";

// nth takes the list name as 1st param
// and list item as the 2nd
div {
  background: nth($colours, 3);
  padding: nth($padding, 2); // "20px"
  border: 2px unquote(nth($border, 1));
}

通过记住每个属性的位置来访问它们并不是很高效。如果您希望对相似的变量（例如颜色）进行分组，那么Sass Maps更适合这种情况。使用Sass Loops时，列表非常有用。