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

Question

我有 3x 圆形图标(基于 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;
}

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;

但是，正如您所看到的，即使我为 .bad 类传递了 $my-red ，绿色图标周围仍然有红光。

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

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

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

我重新创建了一个 Stackblitz example

Answer 1

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

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