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

less.js是否编译与浏览器兼容的css代码?,css,less,Css,Less,在less中是否有一种方法可以将较少的代码轻松编译为以下与浏览器兼容的css代码 #梯度1{ 背景:-webkit线性渐变(红色、蓝色);/*用于Safari 5.1至6.0*/ 背景:-o-线性梯度(红色、蓝色);/*用于Opera 11.1至12.0*/ 背景:-moz线性渐变(红色、蓝色);/*适用于Firefox 3.6至15*/ 背景:线性渐变(红色、蓝色);/*标准语法(必须是最后一个)*/ } 还是我必须手动操作 我还意识到我的less代码不是按字母顺序编译的,我正在使用以下命令

在less中是否有一种方法可以将较少的代码轻松编译为以下与浏览器兼容的css代码

#梯度1{
背景:-webkit线性渐变(红色、蓝色);/*用于Safari 5.1至6.0*/
背景:-o-线性梯度(红色、蓝色);/*用于Opera 11.1至12.0*/
背景:-moz线性渐变(红色、蓝色);/*适用于Firefox 3.6至15*/
背景:线性渐变(红色、蓝色);/*标准语法(必须是最后一个)*/
}
还是我必须手动操作


我还意识到我的less代码不是按字母顺序编译的,我正在使用以下命令行
lessc(less文件)(css文件)

是的,您可以创建mixin来实现您想要的功能:

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

请参见。您还可以向mixin添加参数,这里有几个示例:@TKrugg nice collection,非常有用。谢谢分享