官方网站：

检查编译自己的less代码网站:

先贴段代码，等会儿在总结

@color:#f00;body{    #nev{        background-color:@color*2;    }    a{        font-size:12px;        &:hover{            font-size:14px;        };    }    .h6(){        border-radius:#fff;    }   pre{.h6()} }

//编译后的代码body #nev {  background-color: #ff0000;}body a {  font-size: 12px;}body a:hover {  font-size: 14px;}body pre {  border-radius: #fff;}

其实less很简单，不需要解释，看代码就能懂了，只有那么几个功能，而且还和其它的语言有相同的地方。

1、局部变量

@color:#443311;#header{   color:@color;}

//编译后的css#header {  color: #443311;}

2、混合（个人理解为局部变量传参也觉得可以叫做方法定义）

.class(@radiu){  border-radiu:@radiu;}pre{  .class(5px);}

//编译后的代码pre {  border-radiu: 5px;}

3、嵌套

body{    h3{        color:#4400dd;    }    p{        font-size:12px;                .text{            color:#555;        }    }}

//编译后的代码body h3 {  color: #4400dd;}body p {  font-size: 12px;}body p .text {  color: #555;}

4、函数与操作符

@color:#33ff00;#headr{  color:@color *3;}

//编译后的代码#headr {  color: #99ff00;}

5、函数重载（为个人的理解）——Pattern-matching and Guard expressions

.mixin(red,@color){    background-color:@color;}.mixin(blue,@color){    background-color:@color;}.class{    .mixin(red,"#f00");}

//编译后的代码.class {  background-color: "#f00";}

6、函数

这个比较多，就贴图官方文档的API了

escape(@string);                             // 通过 URL-encoding 编码字符串unit(@dimension, [@unit: ""]);               // 移除或替换属性值的单位color(@string);                              // 将字符串解析为颜色值ceil(@number);                               // 向上取整floor(@number);                              // 向下取整percentage(@number);                         // 将浮点数转换为百分比，例如 0.5 -> 50%round(number, [places: 0]);                  // 四舍五入取整rgb(@r, @g, @b);                             // 转换为颜色值rgba(@r, @g, @b, @a);                        // 转换为颜色值argb(@color);                                // 创建 #AARRGGBB 格式的颜色值hsl(@hue, @saturation, @lightness);          // 创建颜色值hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值hsv(@hue, @saturation, @value);              // 创建颜色值hsva(@hue, @saturation, @value, @alpha);     // 创建颜色值hue(@color);                                 // 从颜色值中提取 `hue` 值saturation(@color);                          // 从颜色值中提取 `saturation` 值lightness(@color);                           // 从颜色值中提取 'lightness' 值red(@color);                                 // 从颜色值中提取 'red' 值green(@color);                               // 从颜色值中提取 'green' 值blue(@color);                                // 从颜色值中提取 'blue' 值alpha(@color);                               // 从颜色值中提取 'alpha' 值luma(@color);                                // 从颜色值中提取 'luma' 值saturate(@color, 10%);                       // 饱和度增加 10%desaturate(@color, 10%);                     // 饱和度降低 10%lighten(@color, 10%);                        // 亮度增加 10%darken(@color, 10%);                         // 亮度降低 10%fadein(@color, 10%);                         // 透明度增加 10%fadeout(@color, 10%);                        // 透明度降低 10%fade(@color, 50%);                           // 设定透明度为 50%spin(@color, 10);                            // 色相值增加 10mix(@color1, @color2, [@weight: 50%]);       // 混合两种颜色greyscale(@color);                           // 完全移除饱和度，输出灰色contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]);                                              // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor                                             // 否则输出 @lightcolormultiply(@color1, @color2);screen(@color1, @color2);overlay(@color1, @color2);softlight(@color1, @color2);hardlight(@color1, @color2);difference(@color1, @color2);exclusion(@color1, @color2);average(@color1, @color2);negation(@color1, @color2);

还是贴一个使用的例子

.mixin(dark,@color){    color:darken(@color,10%);}.header{    .mixin(dark,#f00);}

//编译后的代码.header {  color: #cc0000;}

7、&符号（串联选择器）

a{    font-size:14px;    &:hover{        font-size:12px;    }}

//编译后a {  font-size: 14px;}a:hover {  font-size: 12px;}

所谓的串联选择器，就是指把&符号里的样式，串连在父样式上，并行

9、引入

一般是在一个mian.less中引入其他的less

@import "less/myless"//引入的文件为myless.less,其中可以省略后坠，当然也可以不用省略@import "css/mycss.css"//引入外部的css文件

10、字符串插值

@url:"www.noin.cn";background-image:url("@{url}/img/head.png");

//编译后background-image: url("www.noin.cn/img/head.png");

很好了，今天大致的less心得就写这么多吧，明天就要用一上午的时间看完coffeescript;这个也是一个神器啊...简化js的语言，本来想要把 的学习心得写下来的，但是还是觉得自己也就能写一点皮毛，还是请大家去官网看一下吧，其实安装zonda我就装nodejs都装了2天还没装上，都觉得自己好笨哦。

加油！