/// /// A function for prefixing gradients. /// /// @todo define old webkit mode /// /// @param {String} $mode - Either `webkit-old`, `webkit` or `''` /// @param {Arglist} $gradient /// /// @returns {String} `--linear-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); } }