Sass认为使用单个项目的数组作为道具数组

Question

对于.test1和.test2，结果都是相同的（如链接中所示）。 https://gist.github.com/programmersharp/2d83727f5a59ece5bc633edcbf4a7084

我的目标是为.test1获得1，为.test2获得2

你知道是否有类似于@each的内容，如果只是数组中的一个项目，它将不会遍历属性。

Answer 1

解决方法是在“单个元素列表”的末尾添加,。

$array1: ("x": 1, "y": 1),;
$array2: ("x": 1, "y": 1), ("x": 2, "y": 2);

这将产生length的预期结果。

解释

给出以下代码：

$array1: ("x": 1, "y": 1);
$array2: ("x": 1, "y": 1), ("x": 2, "y": 2);

.test1 {
  width: length($array1);
}
.test2 {
  width: length($array2);
}

$array1被定义为Sass Map，同时$array2被定义为Sass List。当您调用length函数时，它的行为将与您可能已经猜到的不同。

• length($array1)将产生2，因为地图有两个键值对。
• length($array2)将产生2，因为该列表有两个值。

因此，攻击Sass是强制$array1被评估为列表而不是地图。你可以用最后的魔法悬空,来做到这一点。