Question

我目前有一个简单的关键帧mixin，如下所示：

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

我正在使用它来制作像这样的动画中的简单淡入淡出

@include keys(fadeIn) {
 0% { opacity: 0; }
  100% { opacity: 1; }
}

由于某种原因，变量在css中没有正确翻译。 css文件如下所示：

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

我觉得这是一个非常简单的东西我想念但我似乎无法弄明白。除了这一个，我的所有其他变量都有效。你认为这会导致什么？谢谢。

Answer 1

我通过向所有内容添加＃{animationName}来修复它。

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

Sass变量在关键帧mixin中不起作用

1 个答案: