_multiple-backgrounds.scss

/**
 * @description
 * This mixin generates multiple backgrounds
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css-gradients
 * @link spec http://www.w3.org/TR/2011/WD-css3-images-20110217/#linear-gradients
 */

/*
 * A function for prefixing gradients
 *
 * @param mode {'webkit-old'|'webkit'|'moz'|'o'|''}
 * @param gradient
 * @returns
 *   -<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);
}


/*
 * Generates multiple backgrounds
 *
 * @param backgrounds {list}
 * @return
 *   <property>: (<value> * <default-font-size>)px;
 *   <property>: <value>;
 *
 * @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-moz: ();
	$combined-background-o: ();
	$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-moz: append($combined-background-moz, prefixed-gradient('moz', $background), comma);
				$combined-background-o: append($combined-background-o, prefixed-gradient('o', $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-moz: append($combined-background-moz, $background, comma);
				$combined-background-o: append($combined-background-o, $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-moz: append($combined-background-moz, $background, comma);
			$combined-background-o: append($combined-background-o, $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-moz: append($combined-background-moz, $end, comma);
		$combined-background-o: append($combined-background-o, $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-moz);
		background: unquote($combined-background-o);
		background: unquote($combined-background);
	} @else {
		background: unquote($combined-background);
	}

}