来自SCSS的Box-Shadow编译但未在Firebug中显示;使用指南针

Question

我正在为WordPress使用Bones HTML5 Boilerplate启动器模板（也链接到Bootstrap CDN）。我在主.scss文件中导入了罗盘：

@import "compass"; 

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

.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）进行检查时，选择器仅显示border-radius（对我正在测试的图像起作用）。

.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;
 }

任何人都可以解释为什么会发生这种情况（盒子阴影不起作用）？谢谢你的帮助。

Answer 1

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

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

而不是：

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