Linear gradient mixin with n color-stop support, vertical | horizontal, ie-filter and all notations (colorzilla)

_gradient.scss

/******************************************************************************
*
*   _gradients.scss: Creates mixin for gradients.
*
*   @author         Eduard M.
*
******************************************************************************/

@mixin gradient($gradient: (), $fallback: '', $direction: 'horizontal') {

    $modernColor: null; $oldColor: null; $ieColor: null;
    
    $modernDirection: if($direction == 'horizontal', left right, top bottom);
    $oldDirection: if($direction == 'horizontal', 'right top', 'left bottom');
    $ieDirection: if($direction == 'horizontal', 1, 0);
    
    // HERE HAPPENS THE MAGIC
    //                   /\
    //                  /  \
    //                 |    |
    //               --:'''':--
    //                 :'_' :
    //                 _:"":\___
    //  ' '      ____.' :::     '._
    // . *=====<<=)           \    :
    //  .  '      '-'-'\_      /'._.'
    //                   \====:_ ""
    //                  .'     \\
    //                 :       :
    //                /   :    \
    //               :   .      '.
    //               :  : :      :
    //               :__:-:__.;--'
    //               '-'   '-'

    @each $color in $gradient {
        $tempColor: nth($color, 1);
        $tempStop: nth($color, 2);
        $ieColorPosition: '';

        // IE SPECIFIC
        @if index($gradient, $color) == 1 {
            $ieColorPosition: 'startColorstr';
        } @else if (index($gradient, $color) == $utilIESecondColorIndex) {
            $ieColorPosition: 'endColorstr';
        }
        
        // ios gradient fix. ios handles "transparent" wrong and uses `black` as the color base m(. let's handle this right now.
        // we have to set it to a decimal, otherwise we wouldn't get a rgba value. damn. #hotfix
        $alphaValue: if($tempColor == transparent, 0.0000001, 0.9999999);
        

        // transparency handling:
        // get the next or previous color, based on the index of `transparent`
        // w/ this you can generate smooth transitions with the correct color base.
        @if $tempColor == transparent {

            $index: index($gradient, $color);
            $secondColorIndex: if($index == 1, 2, 1); 
            
            $tempColor: nth($gradient, $secondColorIndex);
            $tempColor: nth($tempColor, 1);
        }

        $modernTempColor: rgba($tempColor, $alphaValue);
        // $modernTempColor: if($tempColor == transparent, lighten($modernTempColor, 100%), $modernTempColor);

        $modernColor: join($modernColor, '#{$modernTempColor} #{$tempStop}', comma);
        $oldColor: join($oldColor, 'color-stop(#{$modernTempColor}, #{$tempColor})', comma);
        
        // IE doesn't accept transparent as a value for (start|end)Color. It needs to be 0 then.
        @if $tempColor == transparent {
            $tempColor: 0;
        }
    
        // IE: stop at defined index positions to create a smooth, valid gradient.
        @if index($gradient, $color) == 1  {
            $ieColor: join($ieColor, $ieColorPosition + '=#{$tempColor}', comma);
        } @else if index($gradient, $color) == $utilIESecondColorIndex {
            $ieColor: join($ieColor, $ieColorPosition + '=#{$tempColor}', comma);
        }
    }
    
    // output
    background: #{$fallback}; /* Fallback */
    background: -moz-linear-gradient(nth($modernDirection, 1), #{$modernColor});
    background: -webkit-gradient(linear, left top, unquote($oldDirection), #{$oldColor});
    background: -webkit-linear-gradient(nth($modernDirection, 1), #{$modernColor});
    background: -o-linear-gradient(nth($modernDirection, 1), #{$modernColor});
    background: ms-linear-gradient(nth($modernDirection, 1), #{$modernColor});
    background: linear-gradient(to nth($modernDirection, 2), #{$modernColor});

    @if $utilIESupportGradientColors {
    /* IE */
    // IE only supports linear gradients with two colors. Stupid.
    filter: progid:DXImageTransform.Microsoft.gradient(#{$ieColor},GradientType=#{$ieDirection} );
    }
}

/*
 * example config:
 *
 * $utilIESupportGradientColors: true;
 * $utilIESecondColorIndex: 4 !default;
 * $utilGradientColors: (
 *  ( 'loblolly-shuttlegray', (#ff0000 50%, #f00ff0 50%), #ff0000),
 *  ( 'pacificblue-pistachio', (transparent 50%, #fd60ff 50%), #d55f00),
 *  ( 'shuttlegray-pacificblue', (#f00ff0 50%, transparent 50%), #f00ff0),
 *  ( 'black-trans', (black 50%, transparent 50%), #d55f00),
 *  ( 'trans-white', (transparent 0%, white 25%, transparent 50%, red 75%, blue 100%), #f00ff0),
 * );
 *
 * @each $class, $gradient, $fallback in $utilGradientColors {
 *  .u-bg--#{$class} { 
 *	    @include gradient($gradient, $fallback)
 *  }
 * }
 *
 * @each $color in $utilColors {
 *  .u-bg--#{nth($color, 1)} { background: nth($color, 2); }
 * }
 *
 */