SCSS 与 SASS V3.4 混合错误(不是 V3.3)

Question

我在以下代码方面有问题。使用 https://www.sassmeister.com/进行测试我已经意识到，SASS 版本 3.3 可以，但 3.4 版本不能。我应该如何更改代码，以便它适用于当前版本。

@mixin keyframes ($animation-name) {
  @-webkit-keyframes $animation-name {
    @content;
  }
  @-moz-keyframes $animation-name {
    @content;
  }
  @keyframes $animation-name {
    @content;
  }
}
@include keyframes(move-up) {
    0% {
        top: 25px;
        opacity: 1;
      }
  100% {
    top: -50px;
    opacity: 0;
  }
}

V3.3 的预期输出应如下所示

@-webkit-keyframes move-up {
  ...
}

但是在V3.4中，我得到以下内容

@-webkit-keyframes $animation-name {
  ...
}

Answer 1

在 SCSS v3.4 中，您可以使用#{}插入@keyframes

@mixin keyframes ($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}
@include keyframes(move-up) {
    0% {
        top: 25px;
        opacity: 1;
      }
  100% {
    top: -50px;
    opacity: 0;
  }
}