Sass Keyframes动画mixin生成无效的CSS

Question

我有以下关键帧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.

Answer 1

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

@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的作者认为这是一个错误:

以前的行为是一个错误.绝不允许在任何指令中对变量进行非插值.