groundworkcss/groundwork — pull request #191 by p-j (2013-08-27 01:57:49+00:00)
Title: Fix compilation warning and enhance gradient mixin

*Preamble:* I'm running Compass `0.13.alpha.4` and SASS `3.2.10`

Using Groundwork's SCSS files as sources in a project using Grunt as a build tool, I'm facing this error when I run the build process and the compass tasks kicks in :

```
Cannot determine the opposite position of: "top"
Cannot determine the opposite position of: "to
Cannot determine the opposite position of: bottom"
```

I've tracked down the origin of these warnings to this mixins declaration :

```scss
// gradient
@mixin gradient($startColor: $white, $endColor: $gray-2, $direction: "top") {
@include background-image(linear-gradient($direction, $startColor, $endColor));
@if $direction == "top" {
$direction: "to bottom";
} @elseif $direction == "bottom" {
$direction: "to top";
} @else {
@if $direction == "left" {
$direction: "to right";
} @else {
$direction: "to left";
}
}
-pie-background: linear-gradient($direction, $startColor, $endColor); // IE 6-7 -- Thank Jason for these polyfills for legacy IE browsers: http://css3pie.com/
*behavior: url($PIE_path); // IE 6-7 -- Thank Jason for these polyfills for legacy IE browsers: http://css3pie.com/
}
```

It's probably due to the different implementation of `linear-gradient` from 0.12.2 to 0.13.alpha.4.
The first one doesn't handle the correct CSS3 syntax whereas the other does.

To clarify, with Compass 0.13.alpha.4, I can do this:

```scss
// mixin
.include {
@include background-image(linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55));
}

// CSS3 correct syntax
.solo {
background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55);
}

// output
.include {
background-image: -webkit-linear-gradient(top, #f07575, #bada55);
background-image: -moz-linear-gradient(top, #f07575, #bada55);
background-image: -o-linear-gradient(top, #f07575, #bada55);
background-image: linear-gradient(to bottom, #f07575, #bada55);
}

.solo {
background-image: linear-gradient(to bottom, #f07575, #bada55);
}
```
Compass 0.12.2 doesn't support the new "to" syntax inside the include - but it still works solo:

```scss
// input
.solo {
background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55);
}

// output
.solo {
background-image: linear-gradient(to bottom, #f07575, #bada55);
}
```

So, I figured I could write a patch for the gradient mixin helped by [this helper][1]

Then, when compass 0.13 is finally stable, there would be only one line to change. Plus, it handle cases that wouldn't have worked before such as `to top left` and it's old equivalent `bottom right`

As noted in the comment, the angle function handles numerical angle provided as direction, which I'm not really comfortable with since it assumes that the given value is wrong, by default.

[1]: https://github.com/chriseppstein/compass/issues/965#issuecomment-8226769