css - less.js 是否编译浏览器兼容的 css 代码？

Question

有没有一种方法可以在 less 中轻松地将 less 代码编译为以下浏览器兼容的 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) */
}

还是我必须手动完成？

另外我意识到我的 less 代码没有按字母顺序编译，我正在使用以下命令行 lessc (less file) (css file)

Answer 1

是的，你可以创建 mixins 来做你想做的事:

.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) */
}

然后在要添加此背景的地方调用它:

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

一旦你的 less 被编译，你将得到:

.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