Color Fader: A Sass Mixin

readme.md

Usage:

// Import the fader mixin
@import "colorFader";

// Apply to an ID (or class)
#colorFaderDIV {
    background: red;
    -webkit-animation: colorfader linear infinite;
    -webkit-animation-duration: 90s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: colorfader linear infinite;
    -moz-animation-duration: 90s;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    color: #fff;
}

// Set the list of colors to cycle through
$colorList: #76c261 #fdc345 #f8943 #e65453 #a759a8 #32afe2;

// Call the fader, passing in the animation name and colors
@include colorFader(colorfader, $colorList);

_colorFader.scss

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //
//                                                                //
// mixin: colorFader                                              //
// params: $animationName, $colorList                             //
//   $animationName: The name you want to give your animation     //
//   $colorList: The list of colors you want to cycle through     //
//                                                                //
// Divides 100% by the color count to get the $interval and       //
//   increments the $frame by ($frame + $interval)                //
//                                                                //
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //

@mixin colorFader($animationName, $colorList) {
    $colorCount: length($colorList);
    $interval: 100 / $colorCount;

    //  Keeping this block here until @ interpolation is added
    //    Open issue: https://github.com/sass/sass/issues/429
    //  Then, either pass the prefixes in, or use the below
    //    $prefixes list
    //  Until then, each vendor block will have to be written separately
    //
    //$at: @;
    //$prefixes: "", "-webkit-", "-moz-";
    //@each $prefix in $prefixes {
    //    #{$at}#{$prefix}keyframes #{$animationName} {
    //        $frame: 0;
    //        @each $color in $colorList {
    //            #{$frame}% {background: $color;}
    //            $frame: $frame + $interval;
    //        }
    //    }
    //}

    @keyframes #{$animationName} {
        $frame: 0;
        @each $color in $colorList {
            #{$frame}% {background: $color;}
            $frame: $frame + $interval;
        }
    }

    /* Safari */
    @-webkit-keyframes #{$animationName} {
        $frame: 0;
        @each $color in $colorList {
            #{$frame}% {background: $color;}
            $frame: $frame + $interval;
        }
    }
    
    /* Firefox */
    @-moz-keyframes #{$animationName} {
        $frame: 0;
        @each $color in $colorList {
            #{$frame}% {background: $color;}
            $frame: $frame + $interval;
        }
    }
}