带前缀的 LESS 过渡混合答案

【问题标题】：LESS transition mixin with prefixes带前缀的 LESS 过渡混合
【发布时间】：2015-02-21 14:12:59
【问题描述】：

我想知道是否可以创建一个可以像这样使用的 LESS 混合：

.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;

谢谢！

里昂

【问题讨论】：

这是可能的伴侣。我很确定我之前看到了一个类似的问题，但现在无法追溯。但最好使用 Prefix free 或 Auto-prefixer 等。
这是我指的那个 - stackoverflow.com/questions/21061361/…。您还会发现this 问题很有用。

标签： less

【解决方案1】：

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

Less 自动前缀插件位于：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 并在没有任何浏览器参数的情况下运行自动前缀插件。 (lessc --autoprefix)。然后您的输出将如下所示：

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

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

【讨论】：