Problem with mixins ($variable is not replaced)

[John Smith]

Hi, Sass newbie here. Playing with mixins:

$> sass -v

Sass 3.4.23 (Selective Steve)

$> cat myscss.scss

// Keyframe animations

@mixin keyframes($animation-name) {

  @-webkit-keyframes $animation-name {

    @content;

  }

}

@include keyframes(move-up) {

  0% {

    top: 25px;

    opacity: 1;

  }

  100% {

    top: -50px;

    opacity: 0;

  }

}

$> sass myscss.scss

@-webkit-keyframes move-up {

  0% {

    top: 25px;

    opacity: 1; }

  100% {

    top: -50px;

    opacity: 0; } }

And this is the problem. I was expecting:

@-webkit-keyframes $animation-name {

  0% {

    top: 25px;

    opacity: 1; }

  100% {

    top: -50px;

    opacity: 0; } }

What am I missing?

thanks

[Roy Tomeij]

You will need to use interpolation: @-webkit-keyframes #{$animation-name}

I'm not sure why though in this particular case :P

[Natalie Weizenbaum]

Generally, you should expect to use interpolation to inject SassScript into static values in general. Places where you can use SassScript or variables directly are special cases.

In retrospect, I wish we had been more consistent about requiring interpolation in more situations. The fact that you can use variables in some at-rules muddies the waters. At this point I don't think it's realistic to change that syntax, but further at-rules will always be interpolation-based.

--
You received this message because you are subscribed to the Google Groups "Sass" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sass-lang+unsubscribe@googlegroups.com.
To post to this group, send email to sass...@googlegroups.com.
Visit this group at https://groups.google.com/group/sass-lang.
For more options, visit https://groups.google.com/d/optout.