/usr/share

I always have trouble remembering the syntax for linear gradients, especially the legacy webkit version. It would be nice if compass had a repl that you could execute compass’ CSS3 mixins and functions in and get the nicely prefixed properties out. Well it does!

compass interactive

Here we go:

>> background(linear-gradient(white, black))
background(linear-gradient(#ffffff, #000000))

Ok, the colors were replaced at least. Let’s try the sass syntax for mixins:

>> +background(linear-gradient(white, black))
"+background(linear-gradient(#ffffff, #000000))"

Thanks for quoting it, but no thanks. How about scss:

>> @import background(linear-gradient(white, black))
SyntaxError: Invalid CSS after "": expected expression (e.g. 1px, bold), was "@import backgro..."

Alrighty, unless I’m missing something, the sass repl is pretty useless for compass extensions. There’s even an option for the sass command to run a repl with compass enabled:

sass -i --compass

Same results.

So as a work around I wrote a script to pipe in a line of sass to the sass command, compile it, and print the properties:

$ sass-cat -c "+background(linear-gradient(white, black))"
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000));
background: -webkit-linear-gradient(#ffffff, #000000);
background: -moz-linear-gradient(#ffffff, #000000);
background: -o-linear-gradient(#ffffff, #000000);
background: -ms-linear-gradient(#ffffff, #000000);
background: linear-gradient(#ffffff, #000000);