less.js是否可以編譯與瀏覽器兼容的CSS代碼？

Question

有沒有一種方法，我可以輕鬆編譯更少的代碼到以下瀏覽器兼容的css代碼？

#grad1 { 
    background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(red, blue); /* Standard syntax (must be last) */ 
} 

或者我必須手動執行嗎？

而且我知道我更少的代碼不按字母順序編制，我使用下面的命令行lessc (less file) (css file)

Answer 1

是的，你可以創建混入，會做你想要什麼：

.grad1() { 
    background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(red, blue); /* Standard syntax (must be last) */ 
} 

然後調用它要添加此background：

.class-with-grad1 { 
    .grad1(); 
    /** other less/css stuff **/ 
} 

一旦你少編譯，您將獲得：

.class-with-grad1 { 
    background: -webkit-linear-gradient(red, blue); 
    background: -o-linear-gradient(red, blue); 
    background: -moz-linear-gradient(red, blue); 
    background: linear-gradient(red, blue); 
    /** other less/css stuff **/ 
} 

Documentation for less mixins