Perfect CSS3 gradient rules, which seems impossible to create with Sass, Compass, Bourbon or any other strangely named thing

gradient.css

div {
	background: #000;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzIyOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMGYwIiBvZmZzZXQ9IjAuMiIvPjxzdG9wIHN0b3AtY29sb3I9IiMwZjAiIG9mZnNldD0iMC40Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwMDAwMCIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2cyMjkpIiAvPjwvc3ZnPg==);
	background: -moz-linear-gradient(top, #fff 0%, #0f0 20%, #0f0 40%, #000 100%);
	background: -webkit-linear-gradient(top, #fff 0%, #0f0 20%, #0f0 40%, #000 100%);
	background: linear-gradient(to bottom, #fff 0%, #0f0 20%, #0f0 40%, #000 100%);
	-pie-background: linear-gradient(top, #fff 0%, #0f0 20%, #0f0 40%, #000 100%);
}

Requirements. 1 mixin to produce:

* Fallback background colour of the last node
* Base64 SVG gradient for IE9 & older Opera using background-image, not background, so LT IE 9 don't get a null background
* -moz, -webkit & -pie prefixes using the old syntax
* Unprefixed rule using the new "to" syntax or the correct angle if deg used (newAngle = -oldAngle + 90)
* Need to be able to specify the direction or angle per gradient, with default as to "top"/"to bottom"

Alright, doing this out of the top of my head and cannot test really right now, but this might set you in the right direction:

@minin gradient($colour, $position){
  $i: 0;
  @each $hex in $colour{
    $i: $i+1;
    $colour#{$i}: $hex;
  }
  $n: 0;
  @each $pc in $position{
    $n: $n +1;
    $pos#{$n}: $pc*1%;
  }
  $list: ();
  @for $x from 1 through $i{
    $list: append(, $colour#{$x} $pos#{$x});
    @if $x == $i{
      background-color: $colour#{$x};
    }
  }
  background: -moz-linear-gradient(top $list);
  background: -webkit-linear-gradient(top $list);
  background: linear-gradient(to bottom $list);
  -pie-background: linear-gradient(top $list);
}

and be used as:

div{
    @include gradient(#fff #0f0 #0f0 #000, 0 20 40 100};
}

Yet you'll have to manually do the SVG then.

You can also control the support for prefixes in compass configuration:
http://compass-style.org/reference/compass/helpers/cross-browser/#prefixed
Maybe this will help a bit too

The way I think it works (in your case) would be something along the line:

Compass::BrowserSupport.add_support("linear-gradient", "webkit", "moz", "pie") and so on

BTW, I have written my own solution for this which I will release soon :)