CODEWITHSUNDEEP
csssass
Jeremy
Jeremy

Reputation: 377

When @including a mixin, it refers to a previously passed variable

So I defined this 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;}
  }
}

Now when I do this 

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

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

profile-card and profile-mail component are both having its background set to color2. What might be the issue here?

Upvotes: 1

Views: 42

Answers (1)

Natalia Davydova
Natalia Davydova

Reputation: 748

It seems problem is in animations name:

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

You've created the same animation twice (cause you've included the mixin twice), with the same name, but with different background color. Per CSS rules if you have 2 same properties, the last one will be active. So if you have 2 keyframes animations with the same name, only last one will be applied.

If you simply pass a unique animation name in your mixin, it will work properly!

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

Check the working codepen snippet.

Upvotes: 1

Related Questions