A Sass mixin to allow output of multiple backgrounds with vendor prefixes.

_gradient.scss

// This mixin allows for vendor prefixing of gradients, and allows for multiple
// backgrounds. It also allows you to define with which property you would like
// to apply your gradients.
// i.e. background / background-image / etc.
//
// It supports both the old and new syntaxes - but be warned - using the official
// 'to [direction]' syntax will result in browsers supporting only the old webkit
// syntax not rendering a gradient at all.
//
// https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_gradients

// Example:
//  @include gradient(background,
//	  		linear-gradient(180deg, transparent, hsla(0, 0%, 100%, .1) 10px 10px)
//                    );

@function fix8_prepend_vendor($vendor, $grad-list) {
	$n: length($grad-list);
	$i: 1;

	$vendor-list: ();

	@while $i <= $n {
		$vendor-list: append($vendor-list, #{$vendor}#{nth($grad-list, $i)}, comma);
		$i: $i + 1;
	}
	@return $vendor-list;
}

@mixin gradient($prop, $val...) {
	$n: length($val);
	$i: 1;

	$grad-list: ();
	$prefix-list: ();

	@while $i <= $n {
		$grad-list: append($grad-list, nth($val, $i), comma);
		$i: $i + 1;
	}

	#{$prop}: fix8_prepend_vendor(-webkit-, $grad-list);
	#{$prop}: fix8_prepend_vendor(-moz-, $grad-list);
	#{$prop}: fix8_prepend_vendor(-ms-, $grad-list);
	#{$prop}: fix8_prepend_vendor(-o-, $grad-list);
	#{$prop}: $grad-list;
}