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;
  }
}

SCSS mixin错误与SASS V3.4（不适用于V3.3）

1 个答案: