title: how to use scss function or mxin to generate key frame animation
body: <p>I use named keyframe animations and I want to save myself some writing. I have seen this <a href="https://stackoverflow.com/questions/45350940/scss-function-for-animation-keyframes">SO Question regarding scss keyframe function</a> But I feel like its not to helpful (or Im to stupid to understand)</p>
  
  <p>I have tried a couple variations of</p>
  
  <pre><code>$green: limegreen;
  
  @mixin pulse-animation($name, $color) {
    @keyframes #{$name} {
    0% {
      -moz-box-shadow: 0 0 0 0 rgba($color, 0.4);
      box-shadow: 0 0 0 0 rgba($color, 0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 12px rgba($color, 0);
        box-shadow: 0 0 0 12px rgba($color, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba($color, 0);
        box-shadow: 0 0 0 0 rgba($color, 0);
      }
    }
  }
  .my-element {
    animation: @include pulse-animation("green", $green) 2s infinite;
  }
  </code></pre>
  
  <p>I would also prefer to not have to pass a name into this mixin.</p>