Sass关键帧动画混合生成无效CSS
我有以下关键帧混合,但它似乎是由无效CSS生成的:Sass关键帧动画混合生成无效CSS,css,sass,compass-sass,css-animations,Css,Sass,Compass Sass,Css Animations,我有以下关键帧混合,但它似乎是由无效CSS生成的: @mixin keyframes($animationName) { @-webkit-keyframes $animationName { @content; } @-moz-keyframes $animationName { @content; } @-o-keyframes $animationName { @content; } @
@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;
}
}
它不是将关键帧名称设置为图标一,而是将
$animationName
写入关键帧名称的变量中。您的关键帧混合需要这样编写:
@mixin keyframes($animationName)
{
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-o-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
请注意
GitHub上有一个问题表明了这一点。然而,Sass的作者认为这是一个bug:
以前的行为是一个bug。在任何指令中都不应允许变量非专用
同上,带前缀:
@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;
全部细节
或者改用。你能发布编译后的CSS吗?抱歉,我认为sass更干净,我已经开始删除sass并添加了纯csswow谢谢,现在一切看起来都非常清晰:)