带有 mixins 和函数的 Sass 可重用关键帧答案

【问题标题】：Sass reusable keyframes with mixins and functions带有 mixins 和函数的 Sass 可重用关键帧
【发布时间】：2020-05-29 06:00:32
【问题描述】：

我有四个看起来非常相似的关键帧。我可以做一个 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);
  }
  }
}

【问题讨论】：

抛出什么错误可以分享一下
@Ronak07 它来自 linter "code": "css-identifierexpected"，它在$name 下划线@keyframes $name

标签： sass css-animations keyframe scss-mixins

【解决方案1】：

使用插值来使用 $name like

@keyframes #{$name}

【讨论】：