Interpolation of prefixes on @keyframes in Sass

Question

I am trying to bypass Bourbon without supporting @keyframe by creating my own version of prefixes using the Sass loop as follows:

 $list: '' -ms- -webkit- -moz- -o- $at: @ //at sign @each $prefix in $list #{$at}#{$prefix}keyframes moveclouds from #{$prefix}transform: translateX(2400px) to #{$prefix}transform: translateX(-400px) 

and waiting for css generation:

 @keyframes moveclouds from { transform: translateX(2400px); } @keyframes moveclouds to { transform: translateX(-400px); } @-moz-keyframes moveclouds from { -moz-transform: translateX(2400px); } @-moz-keyframes moveclouds to { -moz-transform: translateX(-400px); } .... 

the problem is that I cannot figure out how to force the Sass @ output (at sign) at the beginning of the line

if i do

 $at: @ // wont work, error $at: \@ // will generate \@keyframes = not good $at: "\@" // wont work error $at: @@ // will generate @@keyframes = not good 

so that someone understands how to output with a sign in Sass?

Answer 1

This is simply not possible using variable interpolation. You can get around @ assignment as follows:

 $at: unquote("@"); // either of these will work $amp: #{"@"}; 

But then you get this error:

error sass / test.scss (line 4: invalid CSS after ": expected selector_comma_sequence, was" @ -ms-keyframes ... ")

Interpolation on @keyframes is not currently supported, but will be in the future. You can track progress on GitHub . At the same time, you will have to manually record keyframe information. A simple example is as follows:

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

Using:

 @include keyframes(foo) { 0% { color: red; } 100% { color: blue; } } 

A more complex example can be found in the Eric Meyer Sass Animation library .