_radial-gradient.scss

// Requires Sass 3.1+
@mixin radial-gradient($G1,        $G2,
                       $G3: false, $G4: false,
                       $G5: false, $G6: false,
                       $G7: false, $G8: false,
                       $G9: false, $G10: false,
                       $pos: 50% 50%,
                       $shape-size: ellipse cover,
                       $deprecated-pos1: center center,
                       $deprecated-pos2: center center,
                       $deprecated-radius1: 0,
                       $deprecated-radius2: 460,
                       $fallback: false) {

  @each $value in $G1, $G2 {
    $first-val: nth($value, 1);
    $pos-type:  type-of($first-val);

    @if ($pos-type != color) or ($first-val != "transparent") {
      @if ($pos-type == number)
      or ($first-val == "center")
      or ($first-val == "top")
      or ($first-val == "right")
      or ($first-val == "bottom")
      or ($first-val == "left") {

        $pos: $value;

        @if $pos == $G1 {
          $G1: false;
        }
      }

      @else if
         ($first-val == "ellipse")
      or ($first-val == "circle")
      or ($first-val == "closest-side")
      or ($first-val == "closest-corner")
      or ($first-val == "farthest-side")
      or ($first-val == "farthest-corner")
      or ($first-val == "contain")
      or ($first-val == "cover") {

        $shape-size: $value;

        @if $value == $G1 {
          $G1: false;
        }

        @else if $value == $G2 {
          $G2: false;
        }
      }
    }
  }

  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);

  $fallback-color: nth($G1, 1);

  @if (type-of($fallback) == color) or ($fallback == "transparent") {
    $fallback-color: $fallback;
  }

  background-color:  $fallback-color;
  background-image: deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0
  background-image:  -webkit-radial-gradient($pos, $shape-size, $full);
  background-image:     -moz-radial-gradient($pos, $shape-size, $full);
  background-image:      -ms-radial-gradient($pos, $shape-size, $full);
  background-image:       -o-radial-gradient($pos, $shape-size, $full);
  background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})");
}

//  Usage: Gradient position and shape-size are required. Color stops are optional.
//  @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
//  @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);