Compass “box-shadow” mixin returns Invalid property value

做~自己de王妃 提交于 2019-12-11 10:17:29

问题


For some reason box-shadow mixin returns value that is considered Invalid by browser. Why does it happen? How to fix?

In my .scss:

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

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

Returns this:

-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);

I use compass with webpack's sass and css loaders. This is what is returned in a <script> tag:

UPD:

It looks like this is node-sass issue. sass-loader is using node-sass and node-sass is not compatible with Compass. https://github.com/sass/node-sass/issues/1004


回答1:


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!




回答2:


I had the same issue, but then I realized that the sass generated version of the css was not including the "px" for my values.

I had to add the px to each value I was setting. Because it needs to be next to the number, i.e. 8px, I had to use the interpolation syntax shown below.

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


来源:https://stackoverflow.com/questions/41957672/compass-box-shadow-mixin-returns-invalid-property-value

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!