css - LESS中的关键帧混合

我一直在寻找可以创建前缀关键帧声明的mixin，但是如果没有丑陋的修复，我找不到任何可以正常工作的东西。

到目前为止，我已经设法创建了以下mixin：

.keyframes(@identifier, @animation) {
  .frames { content: ~"'';} @-webkit-keyframes @{identifier} {@{animation}} @-moz-keyframes @{identifier} {@{animation}} @-ms-keyframes @{identifier} {@{animation}} @-o-keyframes @{identifier} {@{animation}} @keyframes @{identifier} {@{animation}"}
}

用法将是：

.keyframes(fade-in, ~"0% { opacity: 0; }50% { opacity: 0; }100% { opacity: 1; }");

我觉得这在可读性方面完全是错误的，并且每次调用.frames { content: '' }; mixin时都会创建一个规则（.keyframes()）。

还有另一种方法可以很好地做到这一点吗？

边注：
当我输入npm info less --version时，如果很重要，它将返回1.4.28。

最佳答案

@ seven-phases-max对此有一些非常有用的评论。解决方法最终是对css（https://github.com/postcss/autoprefixer）使用后期编译处理，这也帮助了我/我目前正在与其他任务一起工作的团队。

有关详细信息，请参阅问题中的注释。

关于css - LESS中的关键帧混合，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33628971/