Sass CSS动画的SCSS mixin输出CSS中的变量名

我正在尝试这些CSS动画浏览器前缀的SCSS混音，但它输出的是文本

$animation\u name

，应该输出CSS中

$animation\u name

的实际值。如何将实际值输入CSS输出

SCSS：

CSS输出（注意代码中的文字

$animation\u name

）

这是我的建议

检查中的CSS以查看其输出的CSS似乎可以解决问题：

SCSS：

CSS输出：

@-webkit-keyframes inFromTop {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0;
  }
}
@-moz-keyframes inFromTop {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0;
  }
}
@-o-keyframes inFromTop {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0;
  }
}
@keyframes inFromTop {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0;
  }
}

似乎解决了这个问题：

SCSS：

CSS输出：

@-webkit-keyframes inFromTop {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0;
  }
}
@-moz-keyframes inFromTop {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0;
  }
}
@-o-keyframes inFromTop {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0;
  }
}
@keyframes inFromTop {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0;
  }
}

@mixin mykeyframe ($animation_name) {
  @-webkit-keyframes #{$animation_name} {
      @content;
  }

  @-moz-keyframes #{$animation_name} {
      @content;
  }

  @-o-keyframes #{$animation_name} {
      @content;
  }

  @keyframes #{$animation_name} {
      @content;
  }
}

@-webkit-keyframes inFromTop {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0;
  }
}
@-moz-keyframes inFromTop {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0;
  }
}
@-o-keyframes inFromTop {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0;
  }
}
@keyframes inFromTop {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0;
  }
}