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