首先，用到less你的电脑必须有HBuilder并安装插件。

LESS介绍

LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，使用类似CSS的语法，为CSS赋予动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端。

想要了解更多，请点击这里。

变量

变量可以让我们单独定义一系列通过的样式，当你需要的时候调用。这样对全局模式时候只要修改几行代码就可以了。

LESS源码：

    @color:pink;

    #header{
        color:@color;
    }
    h3{
        color:@color;
    }

编译后的CSS：

    #header{
        color:pink;
    }
    h3{
        color:pink;
    }

混合（Mixins）

混合可以将一个定义好的class A轻松引入到另一个class B中，从而简单实现class B继承class A中的所有属性。还可以带参数地调用。

LESS源码：

    .wrap(@radius:5px){
        -webkit-border-radius:@radius;
        -moz-border-radius:@radius;
        -ms-border-radius:@radius;
        -o-border-radius:@radius;
        border-radius:@radius;
    }
    #header{
        .wrap;
    }
    #footer{
        .wrap(10px);
    }

编译后的CSS：

    #header{
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
        border-radius:5px;
    }
    #footer{
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        -ms-border-radius:10px;
        -o-border-radius:10px;
        border-radius:10px;
    }

嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样大大减少代码量，并且代码更加清晰。

LESS源码：

    #header{
        h2{
            font-size:20px;
        }
        div{
            font-size:12px;
            a{
                text-decoration:none;
                &:hover{
                    border-width:1px;
                }
            }
        }
    }

编译后的CSS：

    #header h2{
        font-size:20px;
    }
    #header div{
        font-size:12px;
    }
    #header div a{
        text-decoration:none;
    }
    #header div a:hover{
        border-width:1px;
    }

函数和运算

运算提供了加减乘除操作；我们既可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。

LESS源码：

    @the-border:1px;
    @base-color:#111;
    @red:#842210;

    #header{
        color:(@base-color * 3);
        border-left:@the-border;
        border-right:(@the-border * 2);
    }
    #footer{
        color:(@base-color + #003300);
        border-color:desaturate(@red,10%);
    }

编译后的CSS：

    #header{
        color:#333;
        border-left:1px;
        border-right:2px;
    }
    #footer{
        color:#114411;
        border-color:#7d2717;
    }