Question

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

这是生成前缀版本的循环，它可以正常工作。唯一的问题是当我在from{} to{}动画中添加一个dostuff声明时，它会打破它并导致Less将它们视为mixin。有没有办法让这个工作？

@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代码。

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

1 个答案: