CSS动画的SCSS MIXIN输出CSS中的变量名称

Question

我正在尝试从此要旨中使用CSS动画浏览器前缀的这些SCSS Mixins，但是它正在输出字面的$animation_name，其中它应该在CSS中输出$animation_name的实际值。如何将实际值获取到CSS输出？

scss：

@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;
  }
}

CSS输出（请注意代码中的文字$animation_name）

.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;
  }
}

这是Codepen中的HTML和SCSS

在Codepen调试模式下检查CSS，以查看CSS输出

Answer 1

sass插值似乎解决了问题：sassmeister demo

scss：

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

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;
  }
}