將瀏覽器選擇器與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; 
}