Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
I just stumbled across theCSSguru's animate mixin for Sass (http://thecssguru.freeiz.com/animate/) and found it very useful for including animations in my Sass files. However, I saw room for improvement in the keyframe code. Below is a comparison of the s
// Using a list to loop through each prefix and cut down on duplicated code
$keyframe-prefixes: (-webkit-keyframes, -moz-keyframes, -ms-keyframes, keyframes)
@each $prefix in $keyframe-prefixes
@#{$prefix} fadeIn
0%
opacity: 0
100%
opacity: 1
// Original keyframe code found at http://thecssguru.freeiz.com/animate/
@-webkit-keyframes fadeIn
0%
opacity: 0
100%
opacity: 1
@-moz-keyframes fadeIn
0%
opacity: 0
100%
opacity: 1
@-ms-keyframes fadeIn
0%
opacity: 0
100%
opacity: 1
@keyframes fadeIn
0%
opacity: 0
100%
opacity: 1
@theCSSguru
Copy link

theCSSguru commented Oct 28, 2013

Hey! Yeah it's erroring on line 5 of your new code for @#{$prefix} - it doesn't like the @...

I was doing the same thing in my tests and it wasn't having it, so trying to find a solution to this, and from what I have seen so far there isn't one just yet, hmm.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment