SCSS 贴图值内的逗号 (box-shadow)

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 样式中分隔 box-shadow 值的逗号破坏了我的代码，因为 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/