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 false
s 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.
It turns out that because of compact()
being a Ruby method I needed to use the compass
command (not sass
).