Sass关键帧动画混合生成无效的CSS [英] Sass Keyframes animation mixin generating invalid CSS

问题描述

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

I have the following keyframes mixin, but it seems to be generated invalid 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 。

Instead of having the keyframes name of icon-one, it's writing out $animationName.

推荐答案

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

You're required to use string interpolation on variables for keyframes names. Your keyframes mixin needs to be written like this:

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

请注意，与Compass一起提供的关键帧mixin会执行此操作。

GitHub上有一个问题，指出在Sass的某些版本中不需要插值（可能限于3.3.x）。但是，Sass的作者认为它是一个错误：

There is an issue on GitHub that indicates that interpolation was not required in certain versions of Sass (possibly limited to 3.3.x). However, the authors of Sass considered it to be a bug:

以前的行为是一个错误。

The previous behavior was a bug. Variables should never have been allowed uninterpolated in any directives.

这篇关于Sass关键帧动画混合生成无效的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！