使用@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; 
    } 
} 

順便說一句，你錯過了最後的}。