Sass Keyframes 动画混合生成无效的 CSS答案

【问题标题】：Sass Keyframes animation mixin generating invalid CSSSass Keyframes 动画混合生成无效的 CSS
【发布时间】：2015-02-10 21:14:14
【问题描述】：

我有以下关键帧 mixin，但似乎生成了无效的 CSS：

@mixin keyframes($animationName)
{
    @-webkit-keyframes $animationName {
        @content;
    }
    @-moz-keyframes $animationName {
        @content;
    }
    @-o-keyframes $animationName {
        @content;
    }
    @keyframes $animationName {
        @content;
    }
}

@include keyframes(icon-one) {
        0% {
          opacity: 1;
        }
        33% {
          opacity: 0;
        }
        66% {
          opacity: 0;
        }
        100% {
          opacity: 0;
        }
}

这是输出：

@-webkit-keyframes $animationName {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes $animationName {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes $animationName {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes $animationName {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

关键帧名称不是icon-one，而是写出$animationName。

【问题讨论】：

你能把编译好的 CSS 贴出来吗？
对不起，我认为 sass 更干净，我已经着手删除 sass 并添加了纯 css
哇，谢谢，现在一切看起来都很清晰 :)

标签： css sass compass-sass css-animations

【解决方案1】：

您需要对关键帧名称的变量使用字符串插值。你的关键帧 mixin 需要这样写：

@mixin keyframes($animationName)
{
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName}  {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}

注意keyframes mixin that comes with Compass does this。

GitHub 上有一个问题表明interpolation was not required in certain versions of Sass (possibly limited to 3.3.x)。然而，Sass 的作者认为这是一个错误：

之前的行为是一个错误。绝不应允许在任何指令中未插值的变量。

【讨论】：

【解决方案2】：

同上加前缀：

@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    $browser: '-webkit-' !global;
    @content;
  }
  @-moz-keyframes #{$animationName} {
    $browser: '-moz-' !global;
    @content;
  }
  @-o-keyframes #{$animationName} {
    $browser: '-o-' !global;
    @content;
  }
  @keyframes #{$animationName} {
    $browser: '' !global;
    @content;
  }
} $browser: null;

详细信息here。

或者直接使用Autoprefixer。

【讨论】：