Javascript 无法重用SASS@mixin:再次使用上一个参数值

我有3个圆形图标（基于令人敬畏的字体图标），我正在尝试使用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;
}

@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

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

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

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

_变量.scss

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

但是，正如您所看到的，尽管我已经为

.bad

类传入了

$my red

，但绿色图标周围仍有一道红光

传入@mixin的最后一个颜色参数将始终使所有光晕具有相同的最后一个颜色。

到目前为止，我已经阅读了一些关于@mixin的教程，试图找出我是否错误地使用了@mixin，但我无法找出我的错误。我尝试在mixin中重新分配一个本地$local颜色变量，但没有效果

mixin的目的不是允许重用一堆css属性吗？有人能指出我是如何错误地使用@mixin的吗？或者我不应该在这种情况下使用@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;
}

@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

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

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

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