Question

我想知道是否可以创建一个我可以使用的LESS mixin：

.transform(transition, .5s, ease-out);

并将此CSS作为输出：

-webkit-transition: -webkit-transform .5s ease-out;
-moz-transition: -moz-transform .5s ease-out;
transition: transform .5s ease-out;

但我也可以将相同的mixin用于其他属性（即.transition(opacity, .5s)应该输出到-webkit-transition:opacity .5s; -moz-transition:opacity .5s; transition:opacity .5s;

谢谢！

莱昂

Answer 1

从版本2开始，您可以使用autoprefix后处理器插件，并且您应该将它用于最佳实践。

可以在以下位置找到Less autoprefix插件：https://github.com/less/less-plugin-autoprefix。

安装完毕后，您可以运行：

echo "selector {transition: transform .5s ease-out;}" | lessc - --autoprefix="last 20 versions"

上述命令输出：

selector {
  -webkit-transition: -webkit-transform 0.5s ease-out;
     -moz-transition: -moz-transform 0.5s ease-out;
       -o-transition: -o-transform 0.5s ease-out;
          transition: transform 0.5s ease-out;
}

您应该考虑Graceful degredation并运行autoprefix插件而不使用任何浏览器参数。（lessc --autoprefix）。然后您的输出将如下所示：

selector {
  -webkit-transition: -webkit-transform 0.5s ease-out;
          transition: transform 0.5s ease-out;
}

请注意，在使用less.js在浏览器中编译Less代码时，不能使用自动前缀插件。对于客户端编译，您可以使用-prefix-free库。

较少的转换mixin与前缀

1 个答案: