Sass 可重复使用的关键帧与 mixin 和函数

Question

我有四个看起来非常相似的关键帧。我可以做一个 mixin 或函数并使用它而不是复制我的代码吗？关键帧类似于：

@keyframes ComputerLogoOuterSquare {
  0% {
    transform: translate(0, 0);
  }

  12% {
    transform: translate(0.5%, 0.5%);
  }

  50% {
    transform: translate(0.5%, 0.5%);
  }

  62% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

我尝试了 mixin，但它抛出了一个错误：

@mixin logoAnimation($name, $value) {
  @keyframes $name {
  0% {
    transform: translate(0, 0);
  }

  12% {
    transform: translate($value, $value);
  }

  50% {
    transform: translate($value, $value);
  }

  62% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, 0);
  }
  }
}

Answer 1

像

一样使用插值法来使用$name

@keyframes #{$name}