Interpolation with @each directive in CSS3 @keyframes

[Phil LaPier]

Mozilla 5 now support CSS3 Keyframes for animation—as does webkit.
They both require vedor specific prefixes to work.
@-webkit-keyframes name { }
@-moz-keyframes name { }

I'm trying to write the follow sass directive so that I don't have to
create duplicate keyframe rule sets:

$vendors: '@-webkit', '@-moz';

@each $vendor in $vendors {
#{$vendor}-keyframes slideup {
from {
-webkit-transform: translateY(250px);
}
to {
-webkit-transform: translateY(0px);
}
}
}

Sass 3.2 spits out the following: error sass/_directives.scss (Line
17: Invalid CSS after "": expected selector, was "@-webkit-keyfra...")

Is there a current workaround for this? It would be nice to have sass
support @keyframes.
W3C Spec: http://www.w3.org/TR/css3-animations/

[Eric Meyer]

I work around a similar issue with:

@mixin slideup {
  property: value;
  property: value;
}

@-moz-keyframe-slideup {
  @include slideup;
{
 
@-webkit-keyframe-slideup {
  @include slideup;
{
 
That way, while you do need to repeat the browser-specific declarations, at least you aren't repeating the definition of your keyframes. There is a proposal floating around for a better method to handle animations, but it may be some time before that is built.

Cheers,
Eric

[Phil LaPier]

Thanks for the response Eric.
Though not the cleanest solution, it'll due for now.

Phil

[Ian Storm Taylor]

+1 on this. I have a very similar situation, except my properties require vendor prefixes as well:

$vendors: '-webkit-' '-o-' '-moz-' ''

@each $vendor in $vendors

    @#{$vendor}keyframes bounce

        0%,

        20%,

        50%,

        80%,

        100%

            #{$vendor}transform: translateY(0)

        40%

            #{$vendor}transform: translateY(-30px)

        60%

            #{$vendor}transform: translateY(-15px)

.bounce

    +animation-name(bounce)

On Sunday, June 26, 2011 4:40:16 PM UTC-7, Phil LaPier wrote:

Thanks for the response Eric.
Though not the cleanest solution, it'll due for now.

Phil

On Jun 25, 7:58 pm, Eric Meyer wrote:

[Eric Meyer]

We've already built an animation module that handles all this much more simply:

https://github.com/chriseppstein/compass/blob/master/frameworks/compass/stylesheets/compass/css3/_animation.scss

You can easier use the master branch, or the plugin that it originated in (compass-animation), or just copy/paste.

More support for '@' would be an issue for Sass, not Compass.

Cheers,
-e


On Wednesday, January 2, 2013 7:00:40 AM UTC-7, EquiValent wrote:

+1 for a way to put @ symbol http://stackoverflow.com/questions/14076063/how-to-output-at-in-sass