css - 当 @include 一个 mixin 时，它引用了一个之前传递的变量

Question

所以我定义了这个mixin。

@mixin bgReveal($color) {
  animation-name: bgReveal;
  animation-duration: 350ms;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;

  @keyframes bgReveal {
    0% {background: transparent;}
    100% {background: $color;}
  }
}

现在当我这样做时

.profile-card {
    @include bgReveal($color1);
}

.profile-mail {
    @include bgReveal($color2);
}

profile-card和profile-mail组件都将其背景设置为color2. 这里可能是什么问题？

标签： csssass

Answer 1

似乎问题出在动画名称中：

@keyframes bgReveal {
    0% {background: transparent;}
    100% {background: $color;}
  }

您已经创建了两次相同的动画（因为您已经包含了两次 mixin），名称相同，但背景颜色不同。根据 CSS 规则，如果您有 2 个相同的属性，则最后一个将处于活动状态。因此，如果您有 2 个具有相同名称的关键帧动画，则只会应用最后一个。

如果你只是在你的 mixin 中传递一个唯一的动画名称，它就会正常工作！

@mixin bgReveal($color, $anim-name) {
  animation-name: $anim-name;
  animation-duration: 350ms;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;

  @keyframes #{$anim-name} {
    0% {background: transparent;}
    100% {background: $color;}
  }
}

.profile-card {
    @include bgReveal($color1, redAnim);
}

.profile-mail {
    @include bgReveal($color2, greenAnim);
}

检查工作的 codepen 片段。