Interpolation các tiền tố trên @keyframes trong Sass

Question

Tôi đang cố gắng để workaround Bourbon không hỗ trợ @keyframe bằng cách tạo ra phiên bản tiền tố của riêng tôi với một vòng lặp Sass như thế này:

$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) 

, phấn đấu để tạo 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); 
} 
.... 

vấn đề là tôi không thể tìm ra cách để buộc Sass đầu ra @ (ít dấu hiệu) ở đầu dòng

nếu tôi làm

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

để mọi người biết cách đăng xuất khi đăng nhập Sass?

Answer 1

Điều này đơn giản là không thể sử dụng phép nội suy biến. Bạn có thể khắc phục sự phân công @ như thế này:

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

Nhưng sau đó bạn kết thúc với lỗi này:

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

Interpolation trên @keyframes hiện không được hỗ trợ, nhưng sẽ có trong tương lai. Bạn có thể track the progress of that on GitHub. Trong thời gian đó, bạn sẽ phải ghi lại thông tin keyframe của mình bằng tay. Một ví dụ đơn giản như sau:

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

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

Cách sử dụng:

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

    100% { 
     color: blue; 
    } 
} 

Một ví dụ phức tạp hơn có thể được tìm thấy trong Eric Meyer's Sass Animation library.