1

由于某种原因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 与 webpacksass和css加载器一起使用。这是<script>标签中返回的内容：

在此处输入图像描述

更新：

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

4

2 回答 2

0

我有同样的问题，但后来我意识到 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;
}
于 2017-04-19T15:29:25.027 回答
0

Like you I was importing box shadow in the same way @import "compass/css3/box-shadow"; and having the same problem.

This should work right? The why, I can't answer other than to say we updated out SASS compiler from Compass to gulp-sass which I believe is based off of node-sass. (Following the comments node-sass seems to be involved. I prefer to just import what I need like you). I found as Harry did that it seems the chain is failing.

To resolve this I updated my import statement to @import "compass/css3"; and it worked as expected. This will get you going but may not be ideal depending on your situtation.

Hope it helps!

于 2017-02-16T01:02:18.707 回答