Linear gradient Firefox support

Question

When I make a linear gradient on ColorZilla, I take the scss code that looks like this:

@include background-image(linear-gradient(top,  #659adc 0%,#004ca2 100%));

which generates this css:

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #659adc), color-stop(100%, #004ca2));
background-image: -webkit-linear-gradient(top, #659adc 0%, #004ca2 100%);
background-image: -o-linear-gradient(top, #659adc 0%, #004ca2 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(0%, #659adc), to(#004ca2));
background-image: linear-gradient(top, #659adc 0%, #004ca2 100%);

and none of these work with Firefox. So i do a tweak and I add something I know works in Firefox:

@include background-image(linear-gradient(to bottom,  #659adc 0%,#004ca2 100%)); //notice the 'to bottom'

And now this is the generated css:

background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #659adc), color-stop(100%, #004ca2));
background-image: -webkit-linear-gradient(to bottom, #659adc 0%, #004ca2 100%);
background-image: -o-linear-gradient(to bottom, #659adc 0%, #004ca2 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#659adc), to(#004ca2));
background-image: -webkit-linear-gradient(top, #659adc 0%, #004ca2 100%);
background-image: -o-linear-gradient(top, #659adc 0%, #004ca2 100%);
background-image: linear-gradient(to bottom, #659adc 0%, #004ca2 100%);

which renders fine in Firefox, but compass task cries with this error:

Cannot determine the opposite position of: to

Thoughts? How do you do a cross browser scss linear gradient?

Answer 1

Please install the compass version ~1.0.0

To check the current version of compass you are using, type:

$ compass version

I updated my compass by uninstalling the current version and installing the latest version.

$ gem uninstall compass $ gem install compass

OR

if you don't want to update you can simple use it without gradient direction.

background-image: linear-gradient(#659adc, #004ca2)