SCSS映射值（框阴影）内的逗号

Question

所以我想在一个元素上声明多个框阴影值，如果在这样的值之间用逗号书写，则这是有效的CSS：

.icon {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

但是，我有一个SCSS映射，用于集中我在整个项目中使用的所有box-shadow值。问题在于，以普通CSS样式分隔框阴影值的逗号破坏了我的代码，因为SCSS看到一个逗号并假定我在映射中而不是在值本身内分隔值。

这是我想做的，但是不起作用：

$box-shadow: (
   panel: 0 0 5px 0px rgba(147, 147, 147, 0.25),
   dropdown: 0 6px 12px rgba(0,0,0,.175),
   icon: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
);

.icon {
  box-shadow: map-get($box-shadow, icon);
}

我目前的最佳想法是将图标的box-shadow值放入变量中，然后将其传递到地图中，但我不喜欢这样做，因为首先使用地图的目的是避免松动到处都是变量。

这解决了问题，但我不喜欢它：

$icon-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

$box-shadow: (
   panel: 0 0 5px 0px rgba(147, 147, 147, 0.25),
   dropdown: 0 6px 12px rgba(0,0,0,.175),
   icon: $icon-box-shadow
);

.icon {
  box-shadow: map-get($box-shadow, icon);
}

有更好的方法吗？

Answer 1

您似乎可以将这些值括在括号中

$box-shadow: (
   panel: 0 0 5px 0px rgba(147, 147, 147, 0.25),
   dropdown: 0 6px 12px rgba(0,0,0,.175),
   icon: (0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))
);

.icon {
  box-shadow: map-get($box-shadow, icon);
}

https://jsfiddle.net/jmarikle/5pexqhwb/