Some SASS (SCSS) functions and mixins to simplify applying multiple linear and radial gradients to a single element, specifying position and size as well. Includes a usage example (a 'Home' icon).

style.scss

$webkit: ();
$moz: ();
$ms: ();
$o: ();
$w3c: ();
$pos: ();
$size: ();
$vendors: ($webkit, $moz, $ms, $o, $w3c, $pos, $size);

@function radg($shape, $size, $position, $colorStops, $gpos, $gsize, $scale) {

  $ps: (); @each $p in $gpos { $ps: append(($ps), $p * $scale, space); }
  $sz: (); @each $s in $gsize { $sz: append(($sz), $s * $scale); }

  @return (-webkit-radial-gradient($position, $size, $colorStops)),
    (-moz-radial-gradient($position, $size, $colorStops)),
    (-ms-radial-gradient($position, $size, $colorStops)),
    (-o-radial-gradient($position, $size, $colorStops)),
    (radial-gradient($size $shape at $position, $colorStops)),
    ($ps),
    ($sz);
}

@function ling($deg, $colorStops, $position, $size, $scale) {

  // w3c spec using a different orientation for degrees
  $w3cDeg: $deg; $deg: 90 + ($deg * -1);
  // scale the background-position and background-size values
  $ps: (); @each $v in $position { $ps: append(($ps), $v * $scale); }
  $sz: (); @each $v in $size { $sz: append(($sz), $v * $scale); }

  @return (-webkit-linear-gradient($deg, $colorStops)),
    (-moz-linear-gradient($deg, $colorStops)),
    (-ms-linear-gradient($deg, $colorStops)),
    (-o-linear-gradient($deg, $colorStops)),
    (linear-gradient($w3cDeg, $colorStops)),
    ($ps),
    ($sz);
}

@function pushgrad($newGrads) {
/*
  @param $newGrads: a list matching the output of the radgrad() or lingrad() functions
  @result: the result of all of the appended lists in one list containing them all

  NOTE: the returning of the lists is just serving the syntax. Actually, all of the
  variables in this function are global to this SCSS file,
**/
  @each $grad in $newGrads {
    @if nth($newGrads, 1) == $grad {
      $webkit: append(($webkit), $grad, comma);
    } @else if nth($newGrads, 2) == $grad {
      $moz: append(($moz), $grad, comma);
    } @else if nth($newGrads, 3) == $grad {
      $ms: append(($ms), $grad, comma);
    } @else if nth($newGrads, 4) == $grad {
      $o: append(($o), $grad, comma);
    } @else if nth($newGrads, 5) == $grad {
      $w3c: append(($w3c), $grad, comma);
    } @else if nth($newGrads, 6) == $grad {
      $pos: append(($pos), $grad, comma);
    } @else if nth($newGrads, 7) == $grad {
      $size: append(($size), $grad, comma);
    }
  }
  @return ($webkit, $moz, $ms, $o, $w3c, $pos, $size);
}

// 'GLOBAL DEFAULT' ICON SIZE
// when blocking out the shapes with which you'll make an icon (I suggest using GIMP), you'll want to use a
// base size, which is then scaled up (or down) to suit the situation.

$w: 100px;
$h: 100px;

@mixin icon_home($scale) {

  $s: $scale;

  $gv: ();
// arch of the house
  $gv: pushgrad(ling(90deg, (black 0%, black 100%), (26px 47px), (15px 38px), $s));
  $gv: pushgrad(ling(90deg, (black 0%, black 100%), (59px 47px), (16px 38px), $s));
  $gv: pushgrad(ling(90deg, (black 0%, black 100%), (41px 47px), (18px 17px), $s));
  $gv: pushgrad(radg(ellipse, farthest-side, center bottom, (transparent 98%, black 100%), (41px 64px), (18px 6px), $s));
// main gable
  $gv: pushgrad(ling(-45deg, (black 49%, transparent 50%), (9px 15px), (41px 35px), $s));
  $gv: pushgrad(ling(-45deg, (transparent 28%, black 29%), (15px 48px), (11px 13px), $s));
  $gv: pushgrad(radg(ellipse, farthest-side, center center, (black 98%, transparent 100%), (10px 48px), (12px 14px), $s));
  $gv: pushgrad(ling(45deg, (black 49%, transparent 50%), (50px 15px), (41px 35px), $s));
  $gv: pushgrad(ling(45deg, (transparent 28%, black 29%), (73px 47px), (11px 13px), $s));
  $gv: pushgrad(radg(ellipse, farthest-side, center center, (black 98%, transparent 100%), (78px 48px), (12px 14px), $s));
// bottom corners
  $gv: pushgrad(radg(ellipse, farthest-side, top right, (black 98%, transparent 100%), (26px 85px), (3px 3px), $s));
  $gv: pushgrad(ling(90deg, (black 0%, black 100%), (29px 85px), (12px 3px), $s));
  $gv: pushgrad(ling(90deg, (black 0%, black 100%), (59px 85px), (12px 3px), $s));
  $gv: pushgrad(radg(ellipse, farthest-side, top left, (black 100%, transparent 105%), (71px 85px), (4px 3px), $s));
// roof ridge
  $gv: pushgrad(radg(ellipse, farthest-side, bottom center, (black 85%, transparent 100%), (47px 14px), (6px 2px), $s));

  background: nth($gv, 1);
// webkit
  background: nth($gv, 2);
// moz
  background: nth($gv, 3);
// ms
  background: nth($gv, 4);
// o
  background: nth($gv, 5);
// w3c
  background-position: nth($gv, 6);
  background-size: nth($gv, 7);
  background-repeat: no-repeat;

}

.icon_home.large {
  $scale: 1;
  width: $w * $scale;
  height: $h * $scale;
  @include icon_home($scale);
}