"Cannot determine the opposite position of: to" error in Compass 0.12.7

Question

Running Compass 0.12.7 (Alnilam) I'm running into this error several times repeated:

Running "compass:dev" (compass) task
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
Cannot determine the opposite position of: to
unchanged public/styles/sass/ie_only.scss
unchanged public/img/icons-s6ab39d30ab.png
overwrite public/styles/css/screen.css (2.484s)

It is something wrong with my gradients I take it, but what is going wrong here and how can I alleviate the problem?

Answer 1

I had the same issue on my project using compass 0.12.7 and unforuately the issue can only be solved by updating compass. The issue warning is caused when using the linear-gradient mixin with a position value of to right like in the following example:

div {
  @include background(linear-gradient(to right, red, blue));
}

This would be compiled to something like this (throwing the error you in your question):

div {
  background: -webkit-gradient(linear, to right, to left, color-stop(0%, #ff0000), color-stop(100%, #0000ff));
  background: -webkit-linear-gradient(to right, #ff0000, #0000ff);
  background: -moz-linear-gradient(to right, #ff0000, #0000ff);
  background: -o-linear-gradient(to right, #ff0000, #0000ff);
  background: linear-gradient(to right, #ff0000, #0000ff);
}

Unforunately this is invalid CSS code. The correct output should be the following:

div {
  background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ff0000), color-stop(100%, #0000ff));
  background: -moz-linear-gradient(left, #ff0000, #0000ff);
  background: -webkit-linear-gradient(left, #ff0000, #0000ff);
  background: linear-gradient(to right, #ff0000, #0000ff);
}

The only way to fix it, is updating compass, as I said before.