Compass“box-shadow”mixin返回Invalid属性值

Question

由于某种原因，box-shadow mixin返回被浏览器视为无效的值。为什么会这样？怎么解决？

在我的.scss：

中

@import "compass/css3/box-shadow";

@include box-shadow(0px 1px 5px 1px #c4c3c3);

返回：

-webkit-box-shadow: compact(0px 1px 5px 1px #c4c3c3, false, false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(0px 1px 5px 1px #c4c3c3, false, false, false, false, false, false, false, false, false);
box-shadow: compact(0px 1px 5px 1px #c4c3c3, false, false, false, false, false, false, false, false, false);

我使用指南针与webpack的sass和css加载器。这是<script>标记中返回的内容：

UPD ：

看起来这是node-sass问题。 sass-loader正在使用node-sass，node-sass与Compass不兼容。 https://github.com/sass/node-sass/issues/1004

Answer 1

和我一样，我以同样的方式@import "compass/css3/box-shadow";导入框阴影并遇到同样的问题。

这应该正常吗？为什么，我无法回答除了说我们将SASS编译器从Compass更新为gulp-sass，我认为它基于node-sass。 （在评论之后，似乎涉及到node-sass。我更喜欢导入我需要的东西）。我发现Harry确实看起来连锁失败了。

要解决此问题，我已将导入语句更新为 @import "compass/css3"; ，并且按预期工作。这会让你开始，但可能不是理想的，取决于你的位置。

希望它有所帮助！

Answer 2

我有同样的问题，但后来我意识到css的sass生成版本不包括我的值的“px”。

我必须将px添加到我设置的每个值中。因为它需要在数字旁边，即8px，我必须使用下面显示的插值语法。

@mixin halo($halo-color: $gray-base, $halo-width: 8) {
    -moz-box-shadow: 0 0 #{$halo-width}px $halo-color;
    -webkit-box-shadow: 0 0 #{$halo-width}px $halo-color;
    box-shadow: 0 0 #{$halo-width}px $halo-color;
}