Sass混合并不能替代变量

Question

Sass混合并不能替代变量

5

我正在尝试使用一个SASS mixin来自动使用供应商前缀来制作动画。这是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。

- jangxx

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zach Saucier · Accepted Answer

在mixin中将$name更改为#{$name}

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

演示