Interpolation of prefixes on @keyframes in Sass

Question

I'm trying to workaround Bourbon not supporting @keyframe by generating my own prefixes version with a Sass loop like this:

$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 expecting to generate css:

@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 issue is that I cannot figure out how to force Sass output @ (at sign) in start of a 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 anyone got an idea how to output at sign in Sass ?

Answer 1

This simply isn't possible using variable interpolation. You can get around the @ assignment like this:

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

But then you end up with 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 the progress of that on GitHub. In the mean time, you'll have to write out your keyframe information by hand. A simple example looks like this:

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

    @keyframes #{$name} {
        @content;
    }
}

Usage:

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

    100% {
        color: blue;
    }
}

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