Sass mixins 不会替换变量

Question

我正在尝试使用 SASS mixin 自动在动画上使用供应商前缀。这是混合:

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

现在，如果我像这样包含它:

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

生成的 css 如下所示:

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

SASS 并没有取代 $name与 test .这是一个已知的错误还是有解决方法？我找不到与此问题相关的任何内容。顺便说一下，我使用的是 SASS 3.4.1 版。

Answer 1

更改 $name至 #{$name}在混合

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

Demo