我有以下关键帧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.
解决方法
您需要对关键帧名称的变量使用字符串插值.你的关键帧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的作者认为它是一个错误：
The prevIoUs behavior was a bug. Variables should never have been allowed uninterpolated in any directives.
