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

【问题标题】：SCSS mixin for CSS animations outputting variable names in CSS用于在 CSS 中输出变量名称的 CSS 动画的 SCSS mixin
【发布时间】：2017-12-02 20:57:43
【问题描述】：

我正在为 CSS 动画浏览器前缀尝试这些 SCSS mixins from this gist，但它输出文字 $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;
  }
}

这是HTML and SCSS in Codepen

检查 Codepen debug mode 中的 CSS 以查看它正在输出的 CSS

【问题讨论】：

标签： sass mixins

【解决方案1】：

Sass interpolation 似乎解决了这个问题：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;
  }
}

【讨论】：