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

Question

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

这是HTML and SCSS in Codepen

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

Answer 1

Sass interpolation seems to solve the issue: 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;
  }
}

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

SCSS mixin for CSS animations outputting variable names in CSS

sass

mixins