使用@each缩短@keyframe前缀在SCSS

Question

混合，我试图用一个mixin自动前缀@keyframes

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

这种技术上的工作，但它的大。我有一个个人性质的prefixer混入使用的@each声明，使这个更紧凑：

$prefixes: ("-moz-", "-webkit-", "-o-", ""); 
@mixin prefix($property, $value) { 
    @each $prefix in $prefixes { 
     #{$prefix + $property}: $value; 
    } 
} 

不过，我的问题是关于@ - 前缀关键帧串插。它似乎并不想让我只是坚持一个@在那里：

@mixin keyframePrefix($name) { 
    @each $prefix in $prefixes { 
     @#{$prefix}keyframes #{$name} { 
      @content; 
     } 
    } 
} 

所以我的问题是：我怎么能逃脱@符号？我已经尝试了很多嵌套插值和字符串和诸如此类的东西的组合，但似乎没有任何工作。添加一个反斜杠太行读取\@#{$prefix}keyframes #{$name}是我已经得到最接近的，并编译为\@-moz-keyframes prompt 50%。名称的指示中

Answer 1

插值是不允许的。你可以找到这个issue打开。在解决问题之前，您必须使用大型版本。

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

顺便说一句，你错过了最后的}。