less

 1 使用 @ 定義變數
 2     變數可以做運算
 3     
 4     @color : #000;
 5     @width : 1000px;
 6     
 7 使用 & 表示當前類
 8     .box{
 9         &:hover{
10             color : #000;
11         }
12     }
13 
14 css 可以嵌套
15 
16     ul{
17         display : block;
18         li{
19             float : left;
20             a{
21                 font-size : 18px;
22             }
23         }
24     }
25 
26 繼承 ： 直接在需要的地方引用 class或者 id 類
27 
28 .clearfix{
29     zoom : 1;
30     display : block;
31     &:after{
32         content: "";
33         visibility: hidden;
34         clear: both;
35         height: 0;
36         display: block;
37     }
38 }
39 
40 .radius(@radius : 15px){
41     border-radius: @radius;
42 }
43 
44 .box{
45     .clearfix;
46     .radius(10px);
47 }
48 
49 混合 ： 類似 js 中的函數, [或者叫繼承]
50 .layout(){
51     ...
52 }
53 
54 
55 作用域 ： 限制繼承的條件，可以繼承一個 類的部分內容
56 
57 延伸 ： &:extend(.box); 括弧中可以填寫多個 類名  編譯後的效果就是 css 中的分組
58 
59 
60 when 用來做條件判斷
61 
62 when not 不等於
63 
64 /*
65     使用 isnumber 來判斷某個參數是否為 數字
66  * */
67 
68 .border(@width : 1px , @style : solid, @color : #d1d1d1) when (isnumber(@width)){
69     border: @width @style @color;
70 }
71 
72 /*
73     使用 iscolor 來判斷某個參數是否為 顏色
74  * */
75 
76 .border(@color) when (iscolor(@color)){
77     
78     .border(1px , solid , @color);
79 }
80 
81 
82 .border(@solid) when not ( iscolor(@solid)) , ( isnumber(@solid) ){
83     .border(1px , @solid);
84 }

使用 @ 定義變數變數可以做運算@color : #000;@width : 1000px;使用 & 表示當前類.box{&:hover{color : #000;}}
css 可以嵌套
ul{display : block;li{float : left;a{font-size : 18px;}}}
繼承 ： 直接在需要的地方引用 class或者 id 類
.clearfix{zoom : 1;display : block;&:after{content: "";        visibility: hidden;        clear: both;        height: 0;        display: block;}}
.radius(@radius : 15px){border-radius: @radius;}
.box{.clearfix;.radius(10px);}
混合 ： 類似 js 中的函數, [或者叫繼承].layout(){...}

作用域 ： 限制繼承的條件，可以繼承一個 類的部分內容
延伸 ： &:extend(.box); 括弧中可以填寫多個 類名  編譯後的效果就是 css 中的分組

when 用來做條件判斷
when not 不等於
/*    使用 isnumber 來判斷某個參數是否為 數字 * */
.border(@width : 1px , @style : solid, @color : #d1d1d1) when (isnumber(@width)){    border: @width @style @color;}
/*    使用 iscolor 來判斷某個參數是否為 顏色 * */
.border(@color) when (iscolor(@color)){        .border(1px , solid , @color);}

.border(@solid) when not ( iscolor(@solid)) , ( isnumber(@solid) ){    .border(1px , @solid);}