指南针“box-shadow”混合返回无效的属性值答案

【问题标题】：Compass "box-shadow" mixin returns Invalid property value指南针“box-shadow”混合返回无效的属性值
【发布时间】：2017-01-31 12:31:14
【问题描述】：

由于某种原因，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);

我将 compass 与 webpack 的 sass 和 css 加载器一起使用。这是<script> 标签中返回的内容：

UPD：

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

【问题讨论】：

输出的值确实是错误的。 box-shadow 属性不采用 compact 等任何东西。但是当我在 sassmeister.com 上尝试您的代码时，输出是一个非常有效的代码，与此处给出的输出完全不同。
box-shadow mixin 正在使用一些辅助函数，这些函数又返回一些compact 函数的输出。看起来这条链中的某处出现故障（或）缺少一些额外的包含/导入等。我无法找出确切的问题，因此只需将此信息留在这里作为评论，以帮助其他人进行分析。
@Harry ????谢谢
这对你也有帮助 - stackoverflow.com/questions/11649016/…

标签： sass webpack compass node-sass sass-loader

【解决方案1】：

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

这应该可以正常工作吗？为什么，我只能说我们将 SASS 编译器从 Compass 更新为 gulp-sass，我认为这是基于 node-sass 的。（似乎涉及到 cmets node-sass 。我更喜欢像你一样只导入我需要的东西）。我发现正如Harry 所做的那样，似乎链条出现故障了。

为了解决这个问题，我将导入语句更新为 @import "compass/css3"; 它按预期工作。这会让您继续前进，但根据您的情况可能并不理想。

希望对你有帮助！

【讨论】：

【解决方案2】：

我遇到了同样的问题，但后来我意识到 sass 生成的 css 版本不包括我的值的“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;
}

【讨论】：