The compass "box-shadow" mixin returns an invalid property value

Question

For some reason, box-shadow mixin returns a value that is considered by the Invalid browser. Why is this happening? 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 sass and css downloaders. This is what is returned in the <script> :

UPD

This seems to be a node-sass problem . sass-loader uses node-sass , and node-sass not compatible with the compass. https://github.com/sass/node-sass/issues/1004

Answer 1

Like me, I imported the window shadow in the same way @import "compass/css3/box-shadow"; and had the same problem.

Should this work correctly? Why, I cannot answer otherwise than to say that we have updated the SASS compiler from Compass to gulp-sass, which, it seems to me, is based on node-sass. (After the comments, node-sass seems to be involved. I prefer just importing what I need, like you). I found that Harry did what seems like the chain is not working.

To solve this problem, I updated the import statement to @import "compass/css3"; and it worked as expected . It will make you go, but may not be ideal depending on your situation.

Hope this helps!

Answer 2

I had the same problem, but then I realized that the sss-generated version of css does not include "px" for my values.

I had to add px for every value I set. Since this should 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; }