css - 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 代码进行后处理.

您可以通过在控制台中运行以下命令来安装 autoprefix 插件:

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 的人，你应该回退到前缀 mixin，例如找到的 here由@seven-phases-max 撰写。更好的是你不应该重新发明轮子并尝试其中一个 mixin libraries已经为您解决了前缀问题。