Когда @incincing mixin, это относится к ранее переданной переменной

Question

Итак, я определил этот миксин.

@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 , В чем может быть проблема здесь?

Answer 1

Кажется, проблема в названии анимации:

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

Вы создали одну и ту же анимацию дважды (потому что вы включили миксин дважды), с тем же именем, но с другим цветом фона. Согласно правилам CSS, если у вас 2 одинаковых свойства, последнее будет активным. Поэтому, если у вас есть 2 анимации ключевых кадров с одинаковым именем, будет применяться только последнее.

Если вы просто передадите уникальное имя анимации в свой миксин, оно будет работать правильно!

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

Проверьте рабочий фрагмент кода .