Sass嵌套列表似乎在根级别使用嵌套值

Question

我有一个Sass数组（＆＃34;列表＆＃34;），它有两个项目。每个项目本身就是一个包含两个项目的列表。但是，在测试父列表的长度时，我会遇到一些非常奇怪的行为：

$array: (
    ('a', 'b','c'),
    ('d','e','f')
);

* { length: length($array); }
// -> length: 2

VS

$array: (
    ('a', 'b','c')
);

* { length: length($array); }
// -> length: 3

如果外部列表只有一个值，为什么Sass似乎正在使用内部列表？

Answer 1

您应该添加一个尾随逗号来表示具有单个元素的嵌套列表。来自SASS reference：

  

以逗号分隔的列表可能有逗号。这特别有用，因为它允许您表示单个元素列表。例如，（1，）是一个包含1的列表，（1 2 3，）是一个以逗号分隔的列表，其中包含一个以空格分隔的列表，其中包含1,2和3。

因此，在您的情况下，这将是代码：

$array: (
  ('a', 'b','c'),
):

您也可以使用以下替代方案：

// Alternative 1
$array: 'a' 'b' 'c',;

// Alternative 2
$array: ();
$array: append($array,('a', 'b','c'));