_multiple-backgrounds.scss

///
/// A function for prefixing gradients.
///
/// @todo define old webkit mode
///
/// @param {String} $mode - Either `webkit-old`, `webkit` or `''`
/// @param {Arglist} $gradient
///
/// @returns {String} `-<mode>-linear-gradient(<gradient>)`
///
@function prefixed-gradient ($mode, $gradient) {

	$prefix: '-' + $mode + '-';

	// Get angles
	$angles: helper-gradient-angle('' + nth($gradient, 2));
	$angle: nth($angles, 1);

	// If unprefixed
	@if ($mode == '') {
		$prefix: '';
		$angle: nth($gradient, 2);
	}

	// @TODO define old webkit mode
	@if ($mode == 'webkit-old') {
		$prefix: '-webkit-';
		$angle: nth($angles, 2);
	}

	$prefixed: $prefix + 'linear-gradient(' + $angle;

	@for $i from 1 through length($gradient) {
		@if ($i > 2) {
			$prefixed: append(unquote($prefixed), nth($gradient, $i), comma);
		}
	}

	$prefixed: $prefixed + ')';

	@return unquote($prefixed);
}


///
/// This mixin generates multiple backgrounds.
///
/// @author drublic
///
/// @link http://caniuse.com/css-gradients caniuse
/// @link http://www.w3.org/TR/2011/WD-css3-images-20110217/#linear-gradients spec
///
///
/// @param {Arglist} $backgrounds
///
/// @example
///   .selector {
///     @include x-multiple-backgrounds(
///       rgba(0, 0, 0, 0.3),
///       url('../img/html5_logo.png') top right no-repeat,
///       (linear-gradient, to bottom, #aaa, #ddd)
///     );
///   }
///
@mixin x-multiple-backgrounds ($backgrounds...) {
	$combined-background-webkit-old: ();
	$combined-background-webkit: ();
	$combined-background: ();
	$end: '';

	// Iterate through all backgrounds passed
	@each $background in $backgrounds {

		// Prefix gradients
		@if (type-of($background) == list) {

			@if (nth($background, 1) == 'linear-gradient') {
				$combined-background-webkit-old: append($combined-background-webkit-old, prefixed-gradient('webkit-old', $background), comma);
				$combined-background-webkit: append($combined-background-webkit, prefixed-gradient('webkit', $background), comma);
				$combined-background: append($combined-background, prefixed-gradient('', $background), comma);

			// Nothing to do for non-gradients
			} @else {
				$combined-background-webkit-old: append($combined-background-webkit-old, $background, comma);
				$combined-background-webkit: append($combined-background-webkit, $background, comma);
				$combined-background: append($combined-background, $background, comma);
			}

		// Put colors at end of combined background
		} @else if (type-of($background) == color) {
			$end: $background;
			$background: null;
		} @else if (type-of($background) == string) {
			$combined-background-webkit-old: append($combined-background-webkit-old, $background, space);
			$combined-background-webkit: append($combined-background-webkit, $background, comma);
			$combined-background: append($combined-background, $background, comma);
		}
	}

	// Append color if there is one
	@if $end != '' {
		$combined-background-webkit-old: append($combined-background-webkit-old, $end, space);
		$combined-background-webkit: append($combined-background-webkit, $end, comma);
		$combined-background: append($combined-background, $end, comma);
	}

	// Only print all prefixed versions if necessary
	@if ($combined-background != $combined-background-webkit) {
		background: unquote($combined-background-webkit-old);
		background: unquote($combined-background-webkit);
		background: unquote($combined-background);
	} @else {
		background: unquote($combined-background);
	}

}