SASS: Give arguments to keyframes

Question

I did this small glowing animation :

@include keyframes(teal-glowing) {
    0% { background-color: $teal; -webkit-box-shadow: 0 0 3px $teal; }
    50% { background-color: rgba(3,173,172,0.83); -webkit-box-shadow: 0 0 7px rgba(3,173,172,0.83); }
    100% { background-color: $teal; -webkit-box-shadow: 0 0 3px $teal; }
}

I was wondering if it was possible to do a generic one, and just gives it the color I was as argument. Instead of creating a teal-glowing, green-glowing, ...

Answer 1

You can create all the keyframes using a loop, if you can define the colors in a list in the SASS.

This SASS:

$colors: teal, red;
@for $i from 1 through length($colors) {
  @keyframes(#{nth($colors, $i)}-glowing) {
    0% {background-color: nth($colors, $i);}
    50% {background-color: rgba(nth($colors, $i),0.83);}
    100% {background-color: nth($colors, $i);}
  }
}

will compile into this CSS:

@keyframes (teal-glowing) {
  0% {background-color: teal;}
  50% {background-color: rgba(0, 128, 128, 0.83);}
  100% {background-color: teal;}
}
@keyframes (red-glowing) {
  0% {background-color: red;}
  50% {background-color: rgba(255, 0, 0, 0.83);}
  100% {background-color: red;}
}

and then just add as many colors as you want to that list. If You want colors that aren't named HTML colors, you will have to adjust the naming of the keyframes in this loop (possibly adding another SASS variable containing the names).