相关疑难解决方法(0)

这是我想要制作的标准CSS,但是想要使用SASS Mixin来完成这项工作.

标准CSS

@-webkit-keyframes crank-up {
  100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes crank-up {
  100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes crank-up {
  100% { -o-transform: rotate(360deg);}
}
keyframes crank-up {
  100% { transform: rotate(360deg);}
}

我正在使用与下面的SASS关键帧相同的mixin,而不是按照需要进行编译,如下所示.

MIXIN

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
      @content;
  }
  @-moz-keyframes #{$name} {
      @content;
  }
  @-ms-keyframes #{$name} {
      @content;
  }
  @keyframes #{$name} {
      @content;
  }
}

只要没有关键帧包含需要供应商前缀的属性,上面就可以了.与transform属性一样,所有供应商前缀关键帧都应用了(在本例中)-webkit-前缀.例如:

SCSS

@include keyframes(crank-up) {
  100% { -webkit-transform: rotate(360deg);}
}

CSS

@-webkit-keyframes crank-up …