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;
    }

不帶參數(shù)的屬性集合會在css中顯示方法

    .common(){
        margin:0 auto;
       }

引用該樣式同上.class

帶參數(shù)混合

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

引用

    .main{
        #id(5px);
    }

還可以給參數(shù)設置默認值

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

引用該樣式同上.main

arguments變量

@arguments包含所有傳遞進來的參數(shù)，如果不想單獨處理每一個參數(shù)的話可以這樣寫
好像用到的地方不多

    .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;
    }

嵌套規(guī)則

    #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;
    }

注意 & 符號的使用串聯(lián)選擇器，而不是寫后代選擇器，就可以用到&了

函數(shù)

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中顯示的注釋