I am attempting to give 3 circle icons a glowing effect using a Sass @mixin with Font Awesome icons.
_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;
Even when passing in $my-red for the .bad class, there is still a red glow around the green icons.
https://i.sstatic.net/JtRUL.png
The last color parameter passed into the @mixin will cause all glows to have that same final color.
I have investigated tutorials on @mixin to understand my error, but I cannot pinpoint where I went wrong. I tried assigning to a local $local-color variable within the mixin without success.
Aren't mixins meant to allow reuse of CSS properties? Can someone please help me identify how I am misusing @mixin here? Or should I not be using @mixin in this scenario?
I have recreated an example on Stackblitz