将浏览器选择器与LESS结合使用

Question

是否可以将-webkit，-moz，-o和-ms选择器与LESS结合使用？

我试着做

.transition(@t @d) { 
    transition:@t @d; 
    -webkit-transition:@t @d; 
    -moz-transition:@t @d; 
} 

但它打破了CSS文件。

我希望能够输入

.transition（WhatToTransition时间）

而且有它适用于所有的选择。

Answer 1

你可以尝试在参数之间加逗号。

.transition(@t, @d) { 
    -moz-transition: @t @d @e; 
    -webkit-transition: @t @d @e; 
    transition: @t @d @e; 
} 

而且你还可以添加另一种说法为方便和对参数一些默认值，比如：

.transition(@t: all, @d: 1s, @e: linear) { 
    -moz-transition: @t @d @e; 
    -webkit-transition: @t @d @e; 
    -o-transition: @t @d @e; 
    -ms-transition: @t @d @e; 
    transition: @t @d @e; 
} 

我希望这你想要做什么。我还会重新排列供应商的前缀属性，将非前缀属性放在最后，例如，您还可以添加o和ms，如上所示。例如

。 LESS：

.test { 
    .transition(all, 0.5s, ease-in); 
} 

将返回CSS：

.test { 
    -webkit-transition: all 0.5s ease-in; 
    -moz-transition: all 0.5s ease-in; 
    -o-transition: all 0.5s ease-in; 
    -ms-transition: all 0.5s ease-in; 
    transition: all 0.5s ease-in; 
}