Css 为什么-webkit关键帧在我的SASS mixin中不起作用？

我有一个SASS混音器，可以让按钮闪烁：

@mixin background_animation($color) {
  -webkit-animation: backgroundAnimation 800ms infinite;
  @-webkit-keyframes backgroundAnimation {
    0%      {background-color: $color;}
    50%     {background-color: red;}
    100%    {background-color: $color;}
  }
}

我是这样使用它的：

@include background_animation(#000000);

-webkit-animation-delay: 0s;
-webkit-animation-direction: normal;
-webkit-animation-duration: 0.800000011920929s;
-webkit-animation-fill-mode: none;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: backgroundAnimation;
-webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

... other rules omitted for brevity

但是，它不起作用。按钮的背景色不会闪烁

有人能告诉我我错过了什么吗

另外，如果不将其作为mixin包含，代码可以正常工作

生成的CSS如下所示：

@include background_animation(#000000);

-webkit-animation-delay: 0s;
-webkit-animation-direction: normal;
-webkit-animation-duration: 0.800000011920929s;
-webkit-animation-fill-mode: none;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: backgroundAnimation;
-webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

... other rules omitted for brevity

---

SASS在编译后不会产生期望的结果。这就是你所得到的错误：

.box {
  -webkit-animation: backgroundAnimation 800ms infinite;
}
@-webkit-keyframes backgroundAnimation {
  .box 0%  {
    background-color: black;
  }
  .box 50%  {
    background-color: red;
  }
  .box 100%  {
    background-color: black;
  }
}

用法：

.box {
    @include background_animation(#000000);
}

基本上你不需要。关键帧的框选择器

这是（铬）

更新

你在这里采取的方法有点错误。请尝试以下代码段：

@mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name {
    @content;
  }
  /*
  Other browser prefixes here
  @-moz-keyframes $animation-name {
    @content;
  }*/
}

@mixin animation($str) {
  -webkit-animation: #{$str};
}

@include keyframes(background_animation) {
  0%      {background-color: red;}
  50%     {background-color: green;}
  100%    {background-color: blue;}
}

div {
  @include animation('background_animation 800ms infinite');
}

它应编译为：

@-webkit-keyframes background_animation {
  0% {
    background-color: red;
  }

  50% {
    background-color: green;
  }

  100% {
    background-color: blue;
  }
}
/*
Other browser prefixes here
@-moz-keyframes $animation-name {
  @content;
}*/
div {
  -webkit-animation: background_animation 800ms infinite;
}

---

这会产生。

生成的CSS看起来像什么？@Canfinoon:我更新了我的OP。提供的代码无法生成该CSS。您好，谢谢您的帮助。你的小提琴对我来说很容易理解。这实际上是我在换成SASS之前的经历。我的主要问题仍然是将至少一种

颜色

传递给SASS mixin。我还是不明白怎么做。看看更新的答案。希望这能帮到你。祝你好运再次感谢！您的代码可以正常工作，但我的问题仍然是我需要向混音器传递某种

颜色。据我所知，你在那里硬编码了
红色
，
绿色
，和
蓝色
。但有时我需要其他元素的效果，并且一种颜色不同，例如，我需要的不是
绿色
，而是
橙色
。仍在试图找到解决方案…我认为
$animation name
应该是
{$animation name}
中的
@mixin关键帧（$animation name）