6

我正在尝试通过使用这样的 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 登录时输出吗？

4

1 回答 1

5

这根本不可能使用变量插值。您可以像这样绕过@作业：

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

但是你最终会遇到这个错误：

错误 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 动画库中可以找到更复杂的示例。

于 2012-12-28T21:56:50.793 回答