用于CSS动画的SCSS mixin，用于在CSS中输出变量名称

Question

我正在尝试从这个要旨中为CSS动画浏览器前缀使用这些SCSS mixins ，但是它正在输出$animation_name应$animation_name在CSS中输出实际值的文字。如何将实际值输入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演示

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