无法重用 SASS @mixin：再次使用先前的参数值答案

【问题标题】：Unable to reuse SASS @mixin: Previous parameter value being used again无法重用 SASS @mixin：再次使用先前的参数值
【发布时间】：2020-02-16 01:40:57
【问题描述】：

我有 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;
}

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;

但是，如您所见，即使我已通过 $my-red 的 .bad 课程，绿色图标周围仍有红色光芒。

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

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

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

我重新创建了一个Stackblitz example

【问题讨论】：

标签： javascript html css angular sass

【解决方案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);
}

【讨论】：