带有前缀的LESS过渡混合 [英] LESS transition mixin with prefixes

问题描述

我想知道是否可以创建像这样使用的LESS mixin:

I was wondering if it's possible to create a LESS mixin that I could use like this:

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

并将此CSS作为输出:

and has this CSS as output:

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

but I would also be able to use the same mixin for other properties (i.e. .transition(opacity, .5s) should output to -webkit-transition:opacity .5s; -moz-transition:opacity .5s; transition:opacity .5s;

谢谢！

利昂

推荐答案

由于版本2较少，因此您可以使用自动前缀后处理器插件，并且共识是您应将其用于最佳实践.

Since Less version 2 you can use the autoprefix postprocessor plugin and the consensus is that you should use it for best practice.

Less自动前缀插件可以在以下位置找到: https://github.com/less/less -plugin-autoprefix .

The Less autoprefix plugin can be found at: 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;
}

您应该考虑优美的版本，并在没有任何浏览器参数的情况下运行自动前缀插件. (lessc --autoprefix).然后您的输出将如下所示:

You should consider Graceful degredation and run the autoprefix plugin without any browser argument. (lessc --autoprefix). Then your output will look like that shown below:

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

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

Notice that you can not use the auto prefix plugin when using less.js to compile your Less code in the browser. For client side compiling you can use the -prefix-free library.

这篇关于带有前缀的LESS过渡混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！