SASS keyframes not compiling as wanted -

i using following keyframes mixin scss

@mixin keyframes($name) {     @-webkit-keyframes #{$name} {         @content;     }     @-moz-keyframes #{$name} {         @content;     }     @-ms-keyframes #{$name} {         @content;     }     @keyframes #{$name} {         @content;     } } 

it works perfectly, when have animate, has animation property, when try use child elements not output, 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 need is:

@keyframes text {      0% {         span { color: red; }     }      100% {         span { color: green; }     } } 

how can prevent sass snapping first brackets?

as far concerned apply keyframes element. desired output:

@keyframes text {      0% {         span { color: red; }     }      100% {         span { color: green; }     } } 

does not make sense in css.

i think need :

@keyframes span#text {     0% {color: red; }     100% { color: green; } } 

also not mixin problem sass:

0% {     span { color: red; } } 100% {     span { color: green; } } 

compiles to:

0%  span {   color: red; }  100%  span {   color: green; } 

as desired.

i think intended usege of keyframes mixin like:

span#text {      @include keyframes(text) {       0% {         color: red;       }       100% {         color: green;       }      }  }