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

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

1 个答案: