SASS keyframes not compiling as wanted - sass

Question

I am using the following keyframes mixin for SCSS
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content;
}
#-moz-keyframes #{$name} {
#content;
}
#-ms-keyframes #{$name} {
#content;
}
#keyframes #{$name} {
#content;
}
}
it works perfectly, when i have to animate, which has the animation property, but when i try to use it for child elements i get not the output, that i need (but syntax-valid)
Example:
#include keyframes('text') {
0% {
span { color: red; }
}
100% {
span { color: green; }
}
}
Will output (short ouput):
#keyframes text {
0% span { color: red; }
100% span { color: green; }
}
But what i need is:
#keyframes text {
0% {
span { color: red; }
}
100% {
span { color: green; }
}
}
How can i prevent sass from snapping the first brackets?

Answer 1

As far as i am concerned you apply keyframes to an element. so your desired output:
#keyframes text {
0% {
span { color: red; }
}
100% {
span { color: green; }
}
}
does not make much sense in CSS.
I think what you need is something like :
#keyframes span#text {
0% {color: red; }
100% { color: green; }
}
also it is not your mixin problem as this SASS:
0% {
span { color: red; }
}
100% {
span { color: green; }
}
compiles to:
0% span {
color: red; }
100% span {
color: green; }
as desired.
I think the intended usege of your keyframes mixin would be something like:
span#text {
#include keyframes(text) {
0% {
color: red;
}
100% {
color: green;
}
}
}