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

是的，您可以创建可以满足您需求的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) */
}

然后将其调用到您要添加此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

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

1 个答案: