（一）嵌套规则
【1】less可以让我们以嵌套的方式编写层叠样式，先看下面这段CSS；
.box-a .hd { height: 20px; } .box-a .bd .txt { color: #000; } .box-a .other { position: relative; }
在LESS中，可以用嵌套方式写以上代码：
.box-a{ .hd{ height:20px; } .bd{ .txt{ color:#000; } } .other{ position:relative; } }
代码变更简洁与直观，与DOM树结构很相似。
【2】 & 符号
如果在嵌套规则中，想写串联选择器，而不是写后代选择器，可以用 & 符号，如:hover 伪类写法
.box-a{ .hd{ height:20px; a{ &:hover{ color:#000; } } } }
编译后：
.box-a .hd { height: 20px; } .box-a .hd a:hover { color: #000; }
（二）变量
【1】定义
@名:值; （需要在末尾加上分号）
@color:#f60; p{ background-color:@color; }
编译后：
p { background-color: #ff6600; }
【2】字符串插入变量值
@url:'../images/'; p{ background:url('@{url}sp.png'); }
编译后：
p { background: url('../images/sp.png'); }
【3】变量之间赋值
@url:'../images/'; @pageurl:@url; p{ background-image:url('@{pageurl}xxxx.jpg'); }
编译后：
p { background-image: url('../images/xxxx.jpg'); }
【4】预解析
（1）Less的变量调用，不需要在变量声明后才可以使用；
（2）同一个变量定义多次，在当前作用域中最后一次定义的将被使用
p{ background-image:url('@{url}xxxx.jpg'); } @url:'../images/'; @url:'http://www.xx.com/';
编译后：
p { background-image: url('http://www.xx.com/xxxx.jpg'); }
（三）混合（Mixins）
【1】调用已有的class或id 属性集
#modA{color:#000;} .fl{float:left;} p{ #modA; .fl; }
编译后：
#modA { color: #000; } .fl { float: left; } p { color: #000; float: left; }
【2】带参数（或者空参数）的混合，编译后不会暴露在css文件中
#modA(){color:#000;} .fl(){float:left;} p{ #modA; .fl; }
编译后（CSS文件没有混合模块的代码）：
p { color: #000; float: left; }
【3】设置默认参数
.mixins(@w;@h:100px){ width:@w; height:@h; } p{ .mixins(50px); }
编译后：
p { width: 50px; height: 100px; }
【4】参数
（1）多个参数可以使用分号或者逗号分隔，推荐使用分号分隔，因为逗号有两重含义：它既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。
（2）如果在混合的定义或者是调用中找到至少一个分号，就会假设参数是使用分号分隔的，所有的逗号都属于参数中的一组值的分隔符。
.mixins(@font;@h){ font:@font; height:@h; } p{ .mixins(12px 'Microsoft yahei',arial;50px); }
编译后：
p { font: 12px 'Microsoft yahei', arial; height: 50px; }
（3）... 设置不限制参数的个数；@arguments 获取全部的参数值
.mixins(...){ -webkit-transform:@arguments; -moz-transform:@arguments; -ms-transform:@arguments; -o-transform:@arguments; transform:@arguments; } p{ .mixins(translate(-10px,-10px)); }
编译后：
p { -webkit-transform: translate(-10px, -10px); -moz-transform: translate(-10px, -10px); -ms-transform: translate(-10px, -10px); -o-transform: translate(-10px, -10px); transform: translate(-10px, -10px); }
【5】同名混合不会覆盖，符合且都会调用
.mixins(){ overflow:hidden; } .mixins(){ font:0; } p{ .mixins(); }
编译后：
p { overflow: hidden; font: 0; }
【6】匹配
（1）根据参数数量匹配
.mixins(){ overflow:hidden; } .mixins(@fz){ font:@fz; } .mixins(@w;@h){ width:@w; height:@h; } p{ .mixins(10px); }
编译后：
p { font: 10px; }
（2）指定匹配
.mixins(baidu){ overflow:hidden; } .mixins(winds){ font-size:0; } p{ .mixins(baidu); }
编译后：
p { overflow: hidden; }
【7】表达式匹配 Guards，支持的表达式匹配运算符包括：> >= = =< < （注意：相等是 = ）
（1）单个条件
.mixins(@type) when(@type=baidu){ overflow:hidden; } .mixins(@type) when(@type=winds){ font-size:0; } p{ .mixins(baidu); }
编译后：
p { overflow: hidden; }
（2）多条件，用逗号隔开：符合其中之一即可匹配
.mixins(@type) when(@type=baidu),(@type=winds){ overflow:hidden; } p{ .mixins(baidu); } h1{ .mixins(winds); }
编译后：
p { overflow: hidden; } h1 { overflow: hidden; }
（3）多条件，用 and 隔开：全部符合才匹配
.mixins(@type;@style) when(@type=baidu)and(@style=blue){ overflow:hidden; } p{ .mixins(baidu;blue); } h1{ .mixins(baidu;pink); }
编译后：
p { overflow: hidden; }
（四）递归
可以在定义的混合模块自我调用（递归）
循环输出的例子
.loop(@n;@i:1) when(@i<=@n){ .row-@{i}{ background:url('xxx.jpg') 0 @i*10px no-repeat; } .loop(@n;(@i+1)); } .bg{ .loop(5); }
编译后：
.bg .row-1 { background: url('xxx.jpg') 0 10px no-repeat; } .bg .row-2 { background: url('xxx.jpg') 0 20px no-repeat; } .bg .row-3 { background: url('xxx.jpg') 0 30px no-repeat; } .bg .row-4 { background: url('xxx.jpg') 0 40px no-repeat; } .bg .row-5 { background: url('xxx.jpg') 0 50px no-repeat; }
（五）作用域
作用域跟其他编程语言类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，逐层递增，直到找到为止，否则报错。
@color:#f60; p{ @color:#333; background-color:@color; }
编译后：
p { background-color: #333333; }
（六）命名空间
为了更好组织 CSS 或者单纯是为了更好的封装，可以添加命名空间
.index{ .mixins(){ font-size:0; } } p{ .index > .mixins(); }
编译后：
p { font-size: 0; }
（七）注释
/*编译后保留css原有注释*/
// 同时支持双反斜杠，但编译后不会保留在css文件中
（八）导入（import）
其实就是把样式内嵌到指定的文件中，不会带来额外请求
（1）嵌入less文件
@import "layout.less";
（2）嵌入css文件
@import (inline) "base.css";
（八）避免编译
如果需要输出一些不正确的 CSS 语法或者使用一些 LESS 不认识的专有语法，编译为less文件过程中会出现错误，这时候可以用避免编译来处理。
要输出这样的值我们可以在字符串前加上一个 ~
看下出错的例子：
p{ _top:expression(eval(document.documentElement.scrollTop)); }
编译过程中报错
所以需要用到避免编译的语法
p{ _top:~"expression(eval(document.documentElement.scrollTop))"; }
避免编译也支持字符串插入值
@opacity:50; p{ opacity:50/100; filter:~"alpha(opacity=@{opacity})"; }
编译后：
p { opacity: 0.5; filter: alpha(opacity=50); }
总结：以上只是less知识中的冰山一角，更多请关注官网 http://www.lesscss.net/article/home.html
下一章是 less代码跟踪调试 敬请期待
