Sass mixin for CSS linear gradients with SVG fallback to support IE9.

_linear-gradient.scss

@function inverse-side($side) {
  @if $side == top {
    @return bottom;
  } @else if $side == bottom {
    @return top;
  } @else if $side == left {
    @return right;
  }
  @return left;
}

// Creates a linear gradient background and provides a fallback color.
//
// $angle    - The direction of the linear gradient.
// $color-1  - The first color stop, e.g. `#fff` or `#fff 20%`.
// $color-2  - The second color stop.
// $color-3  - The third color stop (optional).
// $color-4  - The forth color stop (optional).
// $color-5  - The fifth color stop (optional).
// $fallback - The color that will be used as fallback background color.
//
// Compatible in IE9+, Firefox 3.6+, Chrome, Safari 4+, Opera 11.1+.
@mixin linear-gradient($angle, $color-1, $color-2: null, $color-3: null, $color-4: null, $color-5: null, $fallback: null) {
  // If $angle is missing from mixin, reassign vars and add default angle.
  @if type-of($angle) == color {
    $color-5: $color-4; $color-4: $color-3; $color-3: $color-2; $color-2: $color-1; $color-1: $angle;
    $angle: to bottom;
  }
  $angle-old: inverse-side(nth($angle, 2));
  $angle-svg: "";
  @if $angle-old == top {
    $angle-svg: ' x2="0%" y2="100%"';
  } @else if $angle-old == right {
    $angle-svg: ' x2="100%"';
  } @else if $angle-old == bottom {
    $angle-svg: ' x2="0" y1="100%"';
  }

  $offset-1-svg: 0%;
  @if length($color-1) > 1 {
    $offset-1-svg: nth($color-1, 2);
  }
  $offset-2-svg: 100%;
  @if length($color-2) > 1 {
    $offset-2-svg: nth($color-2, 2);
  }
  $offset-3-svg: 100%;
  $offset-4-svg: 100%;
  $offset-5-svg: 100%;

  $full-svg: "<stop style=\"stop-color:#{opacify(nth($color-1, 1), 1)};stop-opacity:#{opacity(nth($color-1, 1))}\" offset=\"#{$offset-1-svg}\"/><stop style=\"stop-color:#{opacify(nth($color-2, 1), 1)};stop-opacity:#{opacity(nth($color-2, 1))}\" offset=\"#{$offset-2-svg}\"/>";

  @if $color-3 != null {
    @if length($color-3) > 1 {
      $offset-3-svg: nth($color-3, 2);
    }
    $full-svg: $full-svg + "<stop style=\"stop-color:#{opacify(nth($color-3, 1), 1)};stop-opacity:#{opacity(nth($color-3, 1))}\" offset=\"#{$offset-3-svg}\"/>";
  }
  @if $color-4 != null {
    @if length($color-4) > 1 {
      $offset-4-svg: nth($color-4, 2);
    }
    $full-svg: $full-svg + "<stop style=\"stop-color:#{opacify(nth($color-4, 1), 1)};stop-opacity:#{opacity(nth($color-4, 1))}\" offset=\"#{$offset-4-svg}\"/>";
  }
  @if $color-5 != null {
    @if length($color-5) > 1 {
      $offset-5-svg: nth($color-5, 2);
    }
    $full-svg: $full-svg + "<stop style=\"stop-color:#{opacify(nth($color-5, 1), 1)};stop-opacity:#{opacity(nth($color-5, 1))}\" offset=\"#{$offset-5-svg}\"/>";
  }

  $full: $color-1, $color-2, $color-3, $color-4, $color-5;

  // If $fallback is not a color, use $color-1 as the fallback color.
  @if (type-of($fallback) != color) and ($fallback != "transparent") {
    $fallback: nth($color-1, 1);
  }

  background-color: $fallback;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="G"#{$angle-svg}>#{$full-svg}</linearGradient></defs><rect width="100%" height="100%" fill="url(#G)"/></svg>');
  background-size: 100%;
  background-image: -webkit-linear-gradient(#{$angle-old}, #{$full});
  background-image: -moz-linear-gradient(#{$angle-old}, #{$full});
  background-image: -o-linear-gradient(#{$angle-old}, #{$full});
  background-image: unquote("linear-gradient(#{$angle}, #{$full})");
}