less

註釋
以//開頭的註釋不會被編譯到CSS文件中
以/* */開頭的註釋會被編譯到CSS文件中

變量
使用@聲明一個變量： @pink: pink
一、做爲屬性值直接使用： @pink
二、做爲選擇器或屬性名使用： @{pink}
三、做爲url： @{url}
四、變量的延遲加載：
    *{
        @pink: pink
        color: @pink; //black
        @pink: black
    }

嵌套規則
一、基本嵌套規則
二、&的使用 如： &:hover{}

混合
混合就是將一系列屬性從一個規則集引入到另外一個規則集的方式

一、普通混合

    .box1{ width:100px; height:100px; background-color: #0000FF; } .box2{ width:100px; height:100px; background-color: #0000FF; }  

 

二、不帶輸出的混合

.style{ width:100px; height:100px; background-color: #0000FF; } .box1{ .style; } .box2{ .style; }    

 

三、帶參數的混合

.style(@width,@height,@color){ width:@width; height:@height; background-color: @color; } .box1{ .style(100px,100px,red); } .box2{ .style(200px,200px,blue); }

 

四、帶參數而且有默認值的混合

.style(@width: 100px,@height:100px,@color:red){ width:@width; height:@height; background-color: @color; } .box1{ .style(); } .box2{ .style(100px,200px,blue); }

 

五、命名參數

.style(@width: 100px,@height: 100px,@color){ width:@width; height:@height; background-color: @color; } .box1{ .style(@color: red); } .box2{ .style(@height: 200px,@color: blue); }

 

六、匹配模式

.style(@_){ width:0; height:0; } .style(T,@width,@color){ border:@width solid; border-color:@color transparent transparent transparent; } .style(R,@width,@color){ border:@width solid; border-color:transparent @color transparent transparent; } .style(B,@width,@color){ border:@width solid; border-color:transparent transparent @color transparent; } .style(L,@width,@color){ border:@width solid; border-color:transparent transparent transparent @color; } .box1{ .style(T,100px,grey); }

 

七、arguments變量

.style(@1,@2,@3){ width:100px; height:100px; border: @arguments; } .box1{ .style(1px,solid,red); }

 

運算　　能夠進行加減乘除

.style(@1,@2,@3){ width:100 + 100px; height:100px; border: @arguments; }

 

繼承

一種是：

<selector>:extend(.style) { }

 

另外一種是：

<selector> { &:extend(.style); }

 

避免編譯

導入less文件： @import '路徑';