6

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 ?

cimmanon
  • 67,211
  • 17
  • 165
  • 171
equivalent8
  • 13,754
  • 8
  • 81
  • 109

1 Answers1

5

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.

cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • thx anyway for trying, I didn't know that unquote function exist in Sass :) ... tried it as you propose, doh like you said it blow up. I'm using manually written keyframes prefixes myself, but the fact that it cannot be written "prettier" is a thing that annoy me (and will probably keep me awake tonight) – equivalent8 Dec 28 '12 at 22:58
  • 1
    I came across a discussion from a year ago on Google groups regarding animations, hinting at better support for it. I'm guessing their solution was the `@content` directive. See https://groups.google.com/forum/?fromgroups=#!topic/sass-lang/MfPZyWRRPZk – cimmanon Dec 28 '12 at 23:21
  • sadly, Cimmanon is right, this isn't possible :( ...this is like a child's disappointing when he see his superhero in girls outfit :) – equivalent8 Jan 17 '13 at 09:36