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

我想在sass中创建mixin/函数，用于自定义@keyframes动画。看起来我可以用这个代码来做，但是有更好的方法吗

$动画名称：1！全球的；
@混音动画背景（$color1，$color2）{
$animation name:unique-id（）！global；
@关键帧#{$animation name}{
0% {
背景色：$color1；
}
100% {
背景色：$color2；
}
}
@内容
}
@包括动画背景（#007efe，#cce5ff）{
a、 完成{
动画持续时间：0.25s；
动画名称：$动画名称；
}
}
@包括动画背景（#aabbcc，#ffabb）{
b、 完成{
动画持续时间：0.25s；
动画名称：$动画名称；
}
}

生成此css

---

通过在mixin中包含您的

.finished

类，稍微缩小SCS。不过，我不确定这是否正是你想要的

//混音：
@mixin animate_bg（$color1、$color2、$class、$duration）{
$animation name:unique-id（）！global；
@关键帧#{$animation name}{
0% {
背景色：$color1；
}
100% {
背景色：$color2；
}
}
.#{$class}。完成{
动画持续时间：$duration；
动画名称：$动画名称；
}
}
//使用mixin：
@包括动画背景（#007efe，#cce5ff，a，.25s）；
@包括动画背景（#aabbcc，#ffabb，b，.25s）；

通过在mixin中包含您的

.finished

类，稍微缩小SCS。不过，我不确定这是否正是你想要的

//混音：
@mixin animate_bg（$color1、$color2、$class、$duration）{
$animation name:unique-id（）！global；
@关键帧#{$animation name}{
0% {
背景色：$color1；
}
100% {
背景色：$color2；
}
}
.#{$class}。完成{
动画持续时间：$duration；
动画名称：$动画名称；
}
}
//使用mixin：
@包括动画背景（#007efe，#cce5ff，a，.25s）；
@包括动画背景（#aabbcc，#ffabb，b，.25s）；

我在想，也许我甚至可以只使用css（而不是sass）来完成，但是如果我理解正确，“@keyframes”不支持参数。所以我开始尝试使用mixin，但我不经常使用sass，所以我不确定我最终使用的是否有意义，或者是否有一种更简单的方法，我想我甚至可以只使用css（而不是sass）来实现，但是如果我理解正确，“@keyframes”不支持参数。所以我开始尝试使用mixin，但我不经常使用sass，所以我不确定我最终使用的是有意义的还是有更简单的方法

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