SCSS映射值中的逗号(方框阴影)
SCSS映射值中的逗号(方框阴影)
提问于 2018-08-11 02:55:37
所以我想在一个元素上声明多个长方体阴影值，如果在值之间用逗号写就是有效的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看到一个逗号，并假设我在map中分隔一个值，而不是在值本身内。
这就是我想要做的，但它不起作用：
$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);
}我目前最好的想法是将图标的框影值放在一个变量中，然后将其传递给map，但我不喜欢这样做，因为使用map的首要目的是避免到处都是松散的变量。
这个解决了问题，但我不喜欢它：
$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);
}有没有更好的方法？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-11 03:02:53
看起来您可以将值括在圆括号中：
$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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51792566
复制相关文章
相似问题