为 @keyframes 动画创建 mixin/function，它将接受更改值的参数

Question

我想在 sass 中创建 mixin/function 来自定义我的 @keyframes 动画。看起来我可以使用此代码来做到这一点，但有更好的方法吗？

https://www.sassmeister.com/gist/13a4b5d4df15ca46bd484ab5758f6de0

$animation-name: 1 !global;
@mixin animate_bg($color1, $color2) {
  $animation-name: unique-id() !global;
  @keyframes #{$animation-name} {
      0% {
          background-color: $color1;
      }
      100% {
          background-color: $color2;
      }
  }
  @content
}

@include animate_bg(#007efe, #cce5ff) {
  a.finished {
    animation-duration: 0.25s;
    animation-name: $animation-name;
  }
}

@include animate_bg(#aabbcc, #ffaabb) {
  b.finished {
    animation-duration: 0.25s;
    animation-name: $animation-name;
  }
}

生成这个 css

@keyframes uz61m5wd4 {
  0% {
    background-color: #007efe;
  }
  100% {
    background-color: #cce5ff;
  }
}
a.finished {
  animation-duration: 0.25s;
  animation-name: uz61m5wd4;
}

@keyframes uz61m5wdd {
  0% {
    background-color: #aabbcc;
  }
  100% {
    background-color: #ffaabb;
  }
}
b.finished {
  animation-duration: 0.25s;
  animation-name: uz61m5wdd;
}

Answer 1

通过在 mixin 中包含 .finished 类来稍微缩小 SCSS。不过，不确定这是否正是您想要的。

// mixin:
@mixin animate_bg($color1, $color2, $class, $duration) {
  $animation-name: unique-id() !global;

  @keyframes #{$animation-name} {
    0% {
      background-color: $color1;
    }
    100% {
      background-color: $color2;
    }
  }

  .#{$class}.finished {
    animation-duration: $duration;
    animation-name: $animation-name;
  }
}

// using the mixin:
@include animate_bg(#007efe, #cce5ff, a, .25s);
@include animate_bg(#aabbcc, #ffaabb, b, .25s);