Невозможно повторно использовать SASS @mixin: предыдущее значение параметра используется снова

Question

У меня есть 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;
}

. 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, но не смог понять свою ошибку. Я попытался переназначить локальную переменную $ local-color в mixin, но безрезультатно.

Разве не цель mixin - разрешить повторное использование набора свойств css? Может кто-нибудь указать, как я неправильно использую @mixin? Или если бы мне даже не пришлось использовать @mixin в этой ситуации?

Я воссоздал пример Stackblitz

Любая помощьвысоко ценится! Спасибо !!

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