Question

我正在尝试将这些SCSS mixins from this gist用于CSS动画浏览器前缀，但是它输出了文字$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似乎解决了这个问题：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动画的SCSS mixin在CSS

1 个答案: