Browser prefixes as variables through #each sass - css

Question

We have a lot of animation planned and am looking for a cleaner way to address all browsers. Something sass-y like this would be great:
#each $browser in '-webkit-', '-moz-', '-o-', '-ms-' {
##{$browser}keyframes rotate {
from { #{$browser}transform: rotate(0deg);}
to { #{$browser}transform: rotate(360deg);}
}
}
Except that the ##{$vendor}keyfr... produces an error expecting a number or function after the #. Is there a way to force the # through to the css?
Otherwise, has anyone come up with a cleaner way to accomplish this with #each, #mixin or anything else that would save from listing every animation for every browser (i.e. below)?
#-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
#-moz-keyframes rotate {
from { -moz-transform: rotate(0deg);}
to { -moz-transform: rotate(360deg);}
}
#-o-keyframes rotate {
from { -o-transform: rotate(0deg);}
to { -o-transform: rotate(360deg);}
}
#-ms-keyframes rotate {
from { -ms-transform: rotate(0deg);}
to { -ms-transform: rotate(360deg);}
}

Answer 1

You could do that with a mixin, where you pre-define the vendor keyframes instead of dynamically generating the vendors in a loop. Something along these lines maybe:
#mixin keyframes($animationName) {
#-webkit-keyframes #{$animationName} {
$browser: '-webkit-'; #content;
}
#-moz-keyframes #{$animationName} {
$browser: '-moz-'; #content;
}
#-o-keyframes #{$animationName} {
$browser: '-o-'; #content;
}
#keyframes #{$animationName} {
$browser: ''; #content;
}
} $browser: null;
#include keyframes('rotate') {
from { #{$browser}transform: rotate(0deg);}
to { #{$browser}transform: rotate(360deg);}
}
DEMO

Answer 2

Just to keep the mods going...
http://sassmeister.com/gist/554597ba07c49dbd92ce
#include makeKeyframes('badgeGlow') {
from { #include box-shadow(0px 0px 10px rgba($glowToColor, 0.3), 0px 1px 2px rgba(0, 0, 0, .80));color:$glowBaseColor;border-color: $glowBaseColor;}
50% { #include box-shadow(0px 0px 16px rgba($glowToColor, 0.8), 0px 1px 2px rgba(0, 0, 0, .80));color:white;border-color: lighten($glowBaseColor, 20);}
to { #include box-shadow(0px 0px 10px rgba($glowToColor, 0.3), 0px 1px 2px rgba(0, 0, 0, .80));color:$glowBaseColor;border-color: $glowBaseColor;}
}
button.glow {
#include setKeyframeType('badgeGlow',1.5s,infinite);
}
Note here that you invoke the keyFrame generator once and you can refer to the keyframes from anywhere else in your classes with the setKeyframeType mixin and provide some basic parameters. Great when you've got many elements that may share the same type of transitions.