Unable to reuse SASS @mixin: Previous parameter value being used again

Question

I have 3x circle icons (based on font-awesome icons) and I am trying to add a glow effect using sass @mixin.

_mixins.scss

@mixin textGlow($glowColor: 0){
    @keyframes glow{
        from {
            text-shadow: 0 0 1px $glowColor, 0 0 2px $glowColor, 0 0 3px $glowColor;
        }
        to {
            text-shadow: 0 0 3px lighten($glowColor, 5%), 0 0 4px lighten($glowColor, 15%), 0 0 5px lighten($glowColor, 30%);
        }
    }

    @-webkit-keyframes glow{
        from {
            text-shadow: 0 0 1px $glowColor, 0 0 2px $glowColor, 0 0 3px $glowColor;
        }
        to {
            text-shadow: 0 0 3px lighten($glowColor, 5%), 0 0 4px lighten($glowColor, 15%), 0 0 5px lighten($glowColor, 30%);
        }
    }

    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
}

app.component.scss

@import '../styles/variables';
@import '../styles/mixins';

i.fa-circle.good{
  color: $my-green;
  @include textGlow($my-green);
}

i.fa-circle.bad{
  color: $my-red;
  @include textGlow($my-red);
}

_variables.scss

$my-green: #00BB9C;
$my-red: #FB4D62;

However, as you can see, there's a red glow around the green icons even though I have passed in $my-red for .bad class.

The last color parameter passed in to the @mixin will always cause all the glows to have that same last colour.

I have read a few tutorials on @mixin so far to try and figure out if I have used @mixin incorrectly, but I couldn't figure out my mistake. I have tried re-assigning to a local $local-colour variable in the mixin but to no avail.

Isn't the purpose of mixin to allow a bunch of css properties to be reused? Could someone please point out how am I using @mixin wrongly? Or if I shouldn't even be using @mixin in this situation?

I have recreated a Stackblitz example

user_1418760 · Answer

The problem is with the keyframe name that you are using. The following change should help you.

mixins.scss

@mixin textGlow($name, $glowColor){
    @keyframes #{$name}{
        from {
            text-shadow: 0 0 1px $glowColor, 0 0 2px $glowColor, 0 0 3px $glowColor;
        }
        to {
            text-shadow: 0 0 3px lighten($glowColor, 5%), 0 0 4px lighten($glowColor, 15%), 0 0 5px lighten($glowColor, 30%);
        }
    }

    @-webkit-keyframes #{$name}{
        from {
            text-shadow: 0 0 1px $glowColor, 0 0 2px $glowColor, 0 0 3px $glowColor;
        }
        to {
            text-shadow: 0 0 3px lighten($glowColor, 5%), 0 0 4px lighten($glowColor, 15%), 0 0 5px lighten($glowColor, 30%);
        }
    }

    -webkit-animation: $name 1s ease-in-out infinite alternate;
    -moz-animation: $name 1s ease-in-out infinite alternate;
    animation: $name 1s ease-in-out infinite alternate;
}

app.component.scss

i.fa-circle.good{
  color: $my-green;
  @include textGlow('greenglow', $my-green);
}

i.fa-circle.bad{
  color: $my-red;
  @include textGlow('redglow', $my-red);
}

Unable to reuse SASS @mixin: Previous parameter value being used again

1 Answers