使用LESS CSS生成动态前缀关键帧

Question

我目前正试图找到一种方法来生成带有Less的前缀关键帧.

这是生成前缀版本的循环,它可以工作.唯一的问题是,当我from{} to{}在dostuff动画中添加一个声明时,它会破坏它并导致Less像混合一样对待它们.有没有办法让这个工作？

@key-prefix: ~"@-webkit-",~"@-o-",~"@-moz-",~"@";
.generate-keyframes(@i) when (@i > 0) {
    .load1-keyframes((@i - 1));
    @prefix: extract(@key-prefix,@i);
    @{prefix}keyframes dostuff {

    }
}
.generate-keyframes(4);

Answer 1

简而言之,at-rule不支持指令标识符的插值(并且不计划).

好吧,你可以得到你想要的东西,比如:

.vendorize-keyframes(dostuff, {
    0% {color: tomato}
    to {color: potato}
});


.vendorize-keyframes(@name, @frames)  {
  @-webkit-keyframes @name {@frames();}
     @-moz-keyframes @name {@frames();}
       @-o-keyframes @name {@frames();}
          @keyframes @name {@frames();}
}

但一般来说,建议考虑使用像autoprefixer这样的工具,并使用这些硬编码的供应商前缀停止污染Less和/或CSS代码.