1.使用

客户端使用

    <link rel="stylesheet/less" type="text/css" href="style.less">
    <script src="less.js" type="text/javascript"></script>

注意：less文件需要在less.js前引入

2.变量

    @nice-blue:#5B83AD;
    #header{
            color:@light-blue;
                }

输出

    #header{
    color：#5B83AD;
    }

注意：less中变量是“常量“只能定义一次

混合

    .common{
        margin:0 auto;
    }

如果需要在其他class中引用通用属性集，需要这样做

    .class{
        color:#fff;
        .common;
    }

不带参数的属性集合会在css中显示方法

    .common(){
        margin:0 auto;
       }

引用该样式同上.class

带参数混合

    #id(@radius){
        border-radius:@radius;
    }

引用

    .main{
        #id(5px);
    }

还可以给参数设置默认值

    #id(@radius:5px){
        border-radius:@rdius;
    }

引用该样式同上.main

arguments变量

@arguments包含所有传递进来的参数，如果不想单独处理每一个参数的话可以这样写
好像用到的地方不多

    .border_arg(@w:30px,@c:red,@bd:solid){
        border:@arguments;
}

引用

    .border_width{
        .border_arg;
}

css显示

    .border_width{
        border:30px red solid;
}

模式匹配

    .pos(r){
        position:relative;
    }
    .pos(a){
        position:absolute;
    }
    .pos(f){
        position:fixed;
    }

匹配引用

    .box{
        width:100px;
        .pos(f);
    }    

输出

    .box{
        width:100px;
        position:fixed;
    }

导引表达式

    .box1(@a)when(lightness(@a)>=50%){
        background-color:black;
    }
    .box1(@a)when(lightness(@a)<50%){
        background-color:white;
    }

引用

.class{
        .box1(#ddd)
    }

css输出

    .class{
        background-color:black;
    }

嵌套规则

    #header{
        color:black;
        .navigation{
            font-size:12px;
        }
        .logo{
            width:300px;
            &:hover{text-decoration:none;}
        }
    }

css显示

    #header{
        color:black;
        }
    #header .navgation{
        font-size:12px;
       }
    #header .navgation:hover{
            text-decoration:none;
    }

注意 & 符号的使用串联选择器，而不是写后代选择器，就可以用到&了

函数

https://www.css88.com/doc/less/functions/#type-functions-isnumber

命名空间

为了更好的组织css或者为了更好地封装，将一些变量或者混合模块打包起来，以便重复使用

    #id{
        .button(){
            display:block;
            border:1px solid black;
            &:hover{
            background-color:white;
           }
        }
    }

引用

    .calss a{
        #id> .button;
    }

CSS显示

    .class a{
        display:block;
        border:1px solid black;
    }
    .class a:hover{
        background-color:white;
    }

作用域

less中的作用域和其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没有找到的话会去腹肌作用域中查找，知道找到为止

    @var:red;
    #page{
        @var:white;
        #header{
            color:@var    ;//white
        }
      }
    #footer{
        color:@var;        //red
    }

注释

css形式的注释在less中依然是保留的：

    /* 这是一个css中显示的注释*/
    //这是一个不会在css中显示的注释