插值在薩斯

Question

上@keyframes前綴

我想通過生成自己的前綴版採用了薩斯循環像這樣要解決Bourbon不支持@keyframe：

$list: '' -ms- -webkit- -moz- -o- 
$at: @ //at sign 
@each $prefix in $list 

    #{$at}#{$prefix}keyframes moveclouds 
    from 
     #{$prefix}transform: translateX(2400px) 
    to 
     #{$prefix}transform: translateX(-400px) 

，並期待生成CSS：

@keyframes moveclouds from { 
    transform: translateX(2400px); 
} 
@keyframes moveclouds to { 
    transform: translateX(-400px); 
} 

@-moz-keyframes moveclouds from { 
    -moz-transform: translateX(2400px); 
} 
@-moz-keyframes moveclouds to { 
    -moz-transform: translateX(-400px); 
} 
.... 

的問題是，我無法弄清楚如何強制薩斯輸出@（at符號）中的行開始

如果我做

$at: @ // wont work, error 
$at: \@ // will generate \@keyframes = not good 
$at: "\@" // wont work error 
$at: @@ // will generate @@keyframes = not good 

所以任何人都有一個想法如何輸出在簽署薩斯？

Answer 1

這簡直不可能使用可變插值。你可以避開@分配是這樣的：

$at: unquote("@"); // either of these will work 
$amp: #{"@"}; 

但隨後你結束了這個錯誤：

error sass/test.scss (Line 4: Invalid CSS after "": expected selector_comma_sequence, was "@-ms-keyframes ...")

目前不支持@keyframes插值，但將在未來。你可以track the progress of that on GitHub。同時，您必須親自寫出關鍵幀信息。一個簡單的例子是這樣的：

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

    @keyframes #{$name} { 
     @content; 
    } 
} 

用法：

@include keyframes(foo) { 
    0% { 
     color: red; 
    } 

    100% { 
     color: blue; 
    } 
} 

一個更復雜的例子可以在Eric Meyer's Sass Animation library找到。