Skip to content

Instantly share code, notes, and snippets.

@GeoffFoley
Last active April 17, 2018 22:09
Show Gist options
  • Save GeoffFoley/78b92f3a32cba5ad5d714e870c24d3ce to your computer and use it in GitHub Desktop.
Save GeoffFoley/78b92f3a32cba5ad5d714e870c24d3ce to your computer and use it in GitHub Desktop.
Color Fader: A Sass Mixin

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);
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //
// //
// 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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment