Search code examples
sasscompass-sass

Why is Sass/Compass inserting strange compact() functions into my code, breaking it?


I've written a stylesheet with Sass/Compass with these mixins:

$buttonbackground: #50bfec
$darkerbackground: darken($buttonbackground, 30%)
$lighterbackground: lighten($buttonbackground, 20%)    

+background-image(linear-gradient(#6b8e23, white))
+single-text-shadow    
+box-shadow($lighterbackground 0 0 25px, $darkerbackground 0 0 3px 1px inset)

// all copied from examples

Instead of producing code on the lines of this (from the manual)

-webkit-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;
-moz-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;
box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset

it produces stuff like this

-webkit-box-shadow: compact(#ace1f6 0 0 25px, #106d93 0 0 3px 1px inset, false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(#ace1f6 0 0 25px, #106d93 0 0 3px 1px inset, false, false, false, false, false, false, false, false);
box-shadow: compact(#ace1f6 0 0 25px, #106d93 0 0 3px 1px inset, false, false, false, false, false, false, false, false);

which doesn't work. Code with these strange compact functions (which don't appear to be in Sass or the CSS3 spec) and excessive falses appear for my +linear-gradient and +single-text-shadow mixins. (I don't use SCSS)

What is happening and how can I make it output correct and working code? FYI I use a workaround outlined here to make Compass work in WebStorm (my IDE), and I use a Mac.


Solution

  • It turns out that because of compact() being a Ruby method I needed to use the compass command (not sass).