Sass中@keyframes上前缀的插值

我正试图通过使用Sass循环生成自己的前缀版本来解决不支持

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

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

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

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

并希望生成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时输出吗？

使用变量插值是不可能的。您可以这样绕过

@

作业：

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

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

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

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

但最终会出现以下错误：

错误sass/test.scss（第4行：在“”之后的CSS无效：应为选择器\逗号\序列，为“@-ms关键帧…”）

当前不支持

@关键帧上的插值，但将来会支持。你可以。同时，您必须手动写出关键帧信息。一个简单的例子如下所示：

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

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

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

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

用法：

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

    100% {
        color: blue;
    }
}

在中可以找到一个更复杂的示例。
错误是否有消息？看起来这一问题现已得到解决。我遇到了同样的问题，但更新到3.4.13，错误消失了。无论如何，thx尝试一下，我不知道Sass中存在unquote函数：）。。。照你说的去试吧，就像你说的那样，它爆炸了。我自己也在使用手动编写的关键帧前缀，但它不能写得“更漂亮”这一事实让我很恼火（今晚可能会让我睡不着）。一年前，我在谷歌群组上遇到了一个关于动画的讨论，暗示着对它的更好支持。我猜他们的解决方案是
@content
指令。可悲的是，Cimmanon是对的，这是不可能的：（…这就像一个孩子看到自己的超级英雄穿着女孩的衣服时感到失望：）