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: #{"@"};

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

错误sass / test.scss（第4行：“”之后的无效CSS：期望的selector_comma_sequence，是“@ -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中找到更复杂的示例。

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

1 个答案: