Box-Shadow compiling from SCSS but not showing in Firebug; using Compass

Question

I'm using Bones HTML5 Boilerplate starter template for WordPress (also linking to Bootstrap CDN). I've imported compass in my main .scss file:

@import "compass"; 

and when I use the following markup in the partial:

.wp-image-6 {
    @include box-shadow(5px,5px,3px, #888);
    border-radius: 2em;
}

The code seems to compile fine in my style.css file:

.wp-image-6 {
    -webkit-box-shadow: 5px, 5px, 3px, #888888;
    -moz-box-shadow: 5px, 5px, 3px, #888888;
    box-shadow: 5px, 5px, 3px, #888888;
    border-radius: 2em;
}

However, when I inspect with Firebug (or Safari), the selector shows only the border-radius (which does work on the image I'm testing).

.wp-image-6 {
    border-radius: 2em;
}

And if I view the style.css from the browser (by clicking on the style.css link in the head section for example), it shows the styling:

 .wp-image-6 {
     -webkit-box-shadow: 5px, 5px, 3px, #888888;
     -moz-box-shadow: 5px, 5px, 3px, #888888;
     box-shadow: 5px, 5px, 3px, #888888;
     border-radius: 2em;
 }

Can anyone explain why this is happening (box-shadow not working)? Thank you for any help.

Answer 1

In your mixin you have commas where you don't need them. Use

@include box-shadow(5px 5px 3px #888);

instead of:

@include box-shadow(5px,5px,3px, #888);