LESS：在 mixins 中使用 mixins 滥用浏览器前缀

Question

所以，这是我的第一个 mixin

.3transitions (@value1,@value2,@value3,@duration){
   @value: ~"@{value1},@{value2},@{value3}";      
   .transition-property(@value); 
   .transition-delay(0); 
   .transition-duration(@duration); 
   .transition-timing-function(ease); 
 }

这是第二个（还有很多其他的）

.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}

在 webkit 浏览器上，我应该得到带有正确浏览器前缀的编译 CSS，但我得到了

-webkit-transition-property: margin-top,opacity,transform;

而不是

-webkit-transition-property: margin-top,opacity,-webkit-transform;

请问我该如何解决？有没有办法在 LESS 中确定我使用的是 CSS3 样式？

Answer 1

自Less v2 以来，插件变得易于使用。 autoprefix plugin 通过autoprefixer 对您的 Less 代码进行后处理。

您可以通过在控制台中运行以下命令来安装自动前缀插件：

npm install -g less-plugin-autoprefix

安装插件后，您应该能够运行以下命令：

echo "element{ transition-property: margin-top,opacity, transform; }" | lessc - --autoprefix="last 20 versions"

前面的命令会编译成CSS代码如下：

 element {
  -webkit-transition-property: margin-top, opacity, -webkit-transform;
     -moz-transition-property: margin-top, opacity, -moz-transform;
       -o-transition-property: margin-top, opacity, -o-transform;
          transition-property: margin-top, opacity, transform;
}

在浏览器中编译您的 Less 代码客户端时，您不能使用此自动前缀插件。对于浏览器编译中的客户端，您可以考虑使用 -prefixfree 这个 Javascript 库将浏览器的前缀添加到任何利用 Javascript 的 CSS 代码。

当您无法运行需要安装 Node 的自动前缀时，例如那些使用 alternative compilers 之一编译 Less 的人，您应该回退到前缀混合，例如由 @seven-phases 编写的 here -最大限度。更好的是，您不应该重新发明轮子并尝试已经为您解决前缀问题的mixin libraries 之一。