Box-Shadow 从 SCSS 编译但在 Firebug 中不显示；使用指南针答案

【问题标题】：Box-Shadow compiling from SCSS but not showing in Firebug; using CompassBox-Shadow 从 SCSS 编译但在 Firebug 中不显示；使用指南针
【发布时间】：2014-06-03 10:38:13
【问题描述】：

我正在为 WordPress 使用 Bones HTML5 Boilerplate starter 模板（也链接到 Bootstrap CDN）。我已经在我的主 .scss 文件中导入了指南针：

@import "compass";

当我在部分中使用以下标记时：

.wp-image-6 {
    @include box-shadow(5px,5px,3px, #888);
    border-radius: 2em;
}

代码似乎在我的 style.css 文件中编译得很好：

.wp-image-6 {
    -webkit-box-shadow: 5px, 5px, 3px, #888888;
    -moz-box-shadow: 5px, 5px, 3px, #888888;
    box-shadow: 5px, 5px, 3px, #888888;
    border-radius: 2em;
}

但是，当我使用 Firebug（或 Safari）进行检查时，选择器仅显示边框半径（它确实适用于我正在测试的图像）。

.wp-image-6 {
    border-radius: 2em;
}

如果我从浏览器查看 style.css（例如，通过单击 head 部分中的 style.css 链接），它会显示样式：

 .wp-image-6 {
     -webkit-box-shadow: 5px, 5px, 3px, #888888;
     -moz-box-shadow: 5px, 5px, 3px, #888888;
     box-shadow: 5px, 5px, 3px, #888888;
     border-radius: 2em;
 }

谁能解释为什么会发生这种情况（box-shadow 不起作用）？感谢您的帮助。

【问题讨论】：

它没有出现在萤火虫中，因为这些是计算值，而不是样式表中的必然值。您在哪些元素上使用 .wp-image-6 类？我觉得这是一个特殊性的问题。
我尝试了一些不同的元素。我尝试在任何 div、侧边栏和 img 标签（上述类的元素）上放置阴影。对任何事情都不起作用。计算这些值有什么关系？另外，我刚刚尝试了这个包含边界半径：@include border-radius(1em);，它工作，编译到 style.css 文件并更改了图像。我的设置似乎发生了覆盖 box-shadow 的问题，不确定，谢谢您的帮助！
哦，你知道吗...这是因为你有不必要的逗号。试试@include box-shadow(5px 5px 3px #888); 而不是@include box-shadow(5px,5px,3px, #888);
天哪，我有时是个白痴。谢谢你。我想我应该删除这个问题？
哈哈，有时候会这样。我只是把它作为一个答案。

标签： twitter-bootstrap sass compass-sass html5boilerplate

【解决方案1】：

在你的 mixin 中有你不需要的逗号。使用

@include box-shadow(5px 5px 3px #888);

代替：

@include box-shadow(5px,5px,3px, #888);

【讨论】：