javascript - 无法重用 SASS @mixin : Previous parameter value being used again

Question

我有 3 个圆形图标(基于 font-awesome 图标)，我正在尝试使用 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;
}

应用程序组件.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);
}

_变量.scss

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

但是，如您所见，即使我为 .bad 类传入了 $my-red，绿色图标周围仍然有红色光晕。

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

到目前为止，我已经阅读了一些关于@mixin 的教程，试图找出我是否错误地使用了@mixin，但我无法找出我的错误。我尝试重新分配给混合中的本地 $local-colour 变量，但无济于事。

mixin的目的不就是让一堆css属性可以重用吗？有人可以指出我是如何错误地使用@mixin 的吗？或者在这种情况下我什至不应该使用@mixin？

我重新创建了一个 Stackblitz example

Answer 1

问题出在您使用的关键帧名称上。以下更改应该对您有所帮助。

混音.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;
}

应用程序组件.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);
}