css - LESS 中的关键帧混合

Question

我一直在寻找一个可以创建带前缀的关键帧声明的 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; }");

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

有没有另一种很好地做到这一点的方法？

旁注:当我键入 npm info less --version 时，它会返回 1.4.28 如果这很重要。

Answer 1

@seven-phases-max 对此有一些非常有用的评论。修复最终是对 css ( https://github.com/postcss/autoprefixer ) 使用编译后处理，这也帮助我/我目前正在与之合作的团队完成其他任务。

详情请引用问题中的评论。