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代码客户端时，不能使用此autoprefix插件。对于浏览器编译中的客户端，您可以考虑使用-prefixfree此Javascript库将浏览器的前缀添加到任何利用Javascript的CSS代码中。

当你无法运行需要安装Node的autoprefix时，例如那些使用alternative compilers之一编译Less的人，你应该回到前缀mixins，例如找到的here前缀。 @七阶段-MAX。更好的是你不应该重新发明轮子并尝试一个已经为你解决前缀问题的mixin libraries。

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

1 个答案: