title: SCSS mixin for CSS animations outputting variable names in CSS
body: <p>I am trying these SCSS mixins <a href="https://gist.github.com/Integralist/3931680" rel="nofollow noreferrer">from this gist</a> for CSS animation browser prefixes, but it's outputting the literal <code>$animation_name</code> where it should be outputting the actual value for <code>$animation_name</code> in the CSS. How do I get the actual value into the CSS output?</p>
  
  <p>SCSS:</p>
  
  <pre><code>@mixin animation ($delay, $duration, $animation) {
  -webkit-animation-delay: $delay;
  -webkit-animation-duration: $duration;
  -webkit-animation-name: $animation;
  -webkit-animation-fill-mode: forwards;
  
  -moz-animation-delay: $delay;
  -moz-animation-duration: $duration;
  -moz-animation-name: $animation;
  -moz-animation-fill-mode: forwards; 
  
  -o-animation-delay: $delay;
  -o-animation-duration: $duration;
  -o-animation-name: $animation;
  -o-animation-fill-mode: forwards; 
  
  animation-delay: $delay;
  animation-duration: $duration;
  animation-name: $animation;
  animation-fill-mode: forwards; 
  }
  
  @mixin mykeyframe ($animation_name) {
    @-webkit-keyframes $animation_name {
        @content;
    }
  
    @-moz-keyframes $animation_name {
        @content;
    }
  
    @-o-keyframes $animation_name {
        @content;
    }
  
    @keyframes $animation_name {
        @content;
    }
  }
  
  .top{
    position:relative;
    top: 0%;
    width: 100%;
    text-align: center;
    @include animation(0s,1s,inFromTop);
  }
  
  @include mykeyframe(inFromTop) {
    from{
      margin-top: -100%;
    }
    to{
      margin-top: 0;
    }
  }
  </code></pre>
  
  <p>CSS output (note the literal <code>$animation_name</code> in the code)</p>
  
  <pre><code>.top {
    position: relative;
    top: 0%;
    width: 100%;
    text-align: center;
    -webkit-animation-delay: 0s;
    -webkit-animation-duration: 1s;
    -webkit-animation-name: inFromTop;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-delay: 0s;
    -moz-animation-duration: 1s;
    -moz-animation-name: inFromTop;
    -moz-animation-fill-mode: forwards;
    -o-animation-delay: 0s;
    -o-animation-duration: 1s;
    -o-animation-name: inFromTop;
    -o-animation-fill-mode: forwards;
    animation-delay: 0s;
    animation-duration: 1s;
    animation-name: inFromTop;
    animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes $animation_name {
    from {
      margin-top: -100%;
    }
    to {
      margin-top: 0;
    }
  }
  @-moz-keyframes $animation_name {
    from {
      margin-top: -100%;
    }
    to {
      margin-top: 0;
    }
  }
  @-o-keyframes $animation_name {
    from {
      margin-top: -100%;
    }
    to {
      margin-top: 0;
    }
  }
  @keyframes $animation_name {
    from {
      margin-top: -100%;
    }
    to {
      margin-top: 0;
    }
  }
  </code></pre>
  
  <p>Here's the <a href="https://codepen.io/mrengy/pen/aVXLoO?editors=1100" rel="nofollow noreferrer">HTML and SCSS in Codepen</a></p>
  
  <p>Inspect the CSS in <a href="https://s.codepen.io/mrengy/debug/aVXLoO/vPMKKVDVyEBM" rel="nofollow noreferrer">Codepen debug mode</a> to see the CSS it is outputting</p>