Поддержка линейного градиента Firefox

Question

Когда я делаю линейный градиент на ColorZilla, я беру код scss, который выглядит следующим образом:

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

который генерирует этот 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%);

и ни один из них не работает с Firefox. Поэтому я делаю твик и добавляю что-то, что, как я знаю, работает в Firefox:

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

А теперь это сгенерированный 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%);

который хорошо отображается в Firefox, но задача компаса плачет с этой ошибкой:

Невозможно определить противоположную позицию:

Мысли? Как вы делаете кросс-браузерный scss линейный градиент?

Answer 1

Пожалуйста, установите версию компаса ~1.0.0

Чтобы проверить текущую версию используемого вами компаса, введите:

$ compass version

Я обновил свой компас, удалив текущую версию и установив последнюю версию.

$ gem uninstall compass $ gem install compass

ИЛИ ЖЕ

если вы не хотите обновлять, вы можете просто использовать его без направления градиента.

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