Sass mixins are not replacing variables

Question

I'm trying to use a SASS mixin to automatically use vendor-prefixes on animations. This is the mixin:

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

Now if I include it like this:

@include keyframes(test) {
    from {
        opacity: 0; 
    }
    to {
        opacity: 1;
    }
}

The resulting css looks like this:

@-o-keyframes $name { ... }
@-moz-keyframes $name { ... }
@-webkit-keyframes $name { ... }
@keyframes $name { ... }

SASS is simply not replacing the $name with test. Is this a known bug or are there workarounds? I couldn't find anything related to this problem. I'm using SASS version 3.4.1 by the way.

Answer 1

Change $name to #{$name} in the mixin

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

Demo