在Sass中对@keyframes的前缀进行插值

Question

我正在尝试使用像这样的Sass循环生成我自己的前缀版本来解决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);
}
....

问题是我无法弄清楚如何@在一行开始时强制Sass输出(在符号处)

如果我做

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

所以任何人都知道如何在Sass中输出？

Answer 1

使用变量插值这是不可能的.你可以@像这样绕过作业:

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

但是你最终得到了这个错误:

error sass/test.scss(第4行:""之后的无效CSS:期望的selector_comma_sequence,是"@ -ms-keyframes ...")

@keyframes目前不支持插值,但将来会支持插值.您可以在GitHub上跟踪该进度.与此同时,您必须手动写出您的关键帧信息.一个简单的例子如下:

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

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

用法:

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

    100% {
        color: blue;
    }
}

一个更复杂的例子可以在Eric Meyer的Sass动画库中找到.