Sass 中@keyframes 前缀的插值 [英] Interpolation of prefixes on @keyframes in Sass

问题描述

我正在尝试通过生成我自己的前缀来解决 Bourbon 不支持 @keyframe带有 Sass 循环的版本，如下所示:

I'm trying to workaround Bourbon not supporting @keyframe by generating my own prefixes version with a Sass loop like this:

$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 输出 @(在符号处)

the issue is that I cannot figure out how to force Sass output @ (at sign) in start of a line

如果我这样做

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

所以有人知道如何在 Sass 中输出 at sign 吗?

so anyone got an idea how to output at sign in Sass ?

推荐答案

这根本不可能使用变量插值.您可以像这样绕过 @ 分配:

This simply isn't possible using variable interpolation. You can get around the @ assignment like this:

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

但是你最终会出现这个错误:

But then you end up with this error:

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

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

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

Interpolation on @keyframes is not currently supported, but will be in the future. You can track the progress of that on GitHub. In the mean time, you'll have to write out your keyframe information by hand. A simple example looks like this:

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

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

用法:

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

    100% {
        color: blue;
    }
}

可以在 Eric Meyer 的文章中找到更复杂的示例Sass 动画库.

这篇关于Sass 中@keyframes 前缀的插值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！