SCSS mixin for CSS animations outputting variable names in CSS - sass

Question

I am trying these SCSS mixins from this gist for CSS animation browser prefixes, but it's outputting the literal $animation_name where it should be outputting the actual value for $animation_name in the CSS. How do I get the actual value into the CSS output?
SCSS:
#mixin animation ($delay, $duration, $animation) {
-webkit-animation-delay: $delay;
-webkit-animation-duration: $duration;
-webkit-animation-name: $animation;
-webkit-animation-fill-mode: forwards;
-moz-animation-delay: $delay;
-moz-animation-duration: $duration;
-moz-animation-name: $animation;
-moz-animation-fill-mode: forwards;
-o-animation-delay: $delay;
-o-animation-duration: $duration;
-o-animation-name: $animation;
-o-animation-fill-mode: forwards;
animation-delay: $delay;
animation-duration: $duration;
animation-name: $animation;
animation-fill-mode: forwards;
}
#mixin mykeyframe ($animation_name) {
#-webkit-keyframes $animation_name {
#content;
}
#-moz-keyframes $animation_name {
#content;
}
#-o-keyframes $animation_name {
#content;
}
#keyframes $animation_name {
#content;
}
}
.top{
position:relative;
top: 0%;
width: 100%;
text-align: center;
#include animation(0s,1s,inFromTop);
}
#include mykeyframe(inFromTop) {
from{
margin-top: -100%;
}
to{
margin-top: 0;
}
}
CSS output (note the literal $animation_name in the code)
.top {
position: relative;
top: 0%;
width: 100%;
text-align: center;
-webkit-animation-delay: 0s;
-webkit-animation-duration: 1s;
-webkit-animation-name: inFromTop;
-webkit-animation-fill-mode: forwards;
-moz-animation-delay: 0s;
-moz-animation-duration: 1s;
-moz-animation-name: inFromTop;
-moz-animation-fill-mode: forwards;
-o-animation-delay: 0s;
-o-animation-duration: 1s;
-o-animation-name: inFromTop;
-o-animation-fill-mode: forwards;
animation-delay: 0s;
animation-duration: 1s;
animation-name: inFromTop;
animation-fill-mode: forwards;
}
#-webkit-keyframes $animation_name {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
#-moz-keyframes $animation_name {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
#-o-keyframes $animation_name {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
#keyframes $animation_name {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
Here's the HTML and SCSS in Codepen
Inspect the CSS in Codepen debug mode to see the CSS it is outputting

Answer 1

Sass interpolation seems to solve the issue: SassMeister Demo
SCSS:
#mixin mykeyframe ($animation_name) {
#-webkit-keyframes #{$animation_name} {
#content;
}
#-moz-keyframes #{$animation_name} {
#content;
}
#-o-keyframes #{$animation_name} {
#content;
}
#keyframes #{$animation_name} {
#content;
}
}
CSS Output:
#-webkit-keyframes inFromTop {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
#-moz-keyframes inFromTop {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
#-o-keyframes inFromTop {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
#keyframes inFromTop {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}