less是一种动态样式语言，less将css赋予了动态语言的特点，比如：变量、继承、运算、函数。less既可以在客户端运行，也可以借助Node.js或者Rhino在服务端运行。
less的优点：
1.结构清晰，便于扩展。在less中的嵌套规则下，我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且使结构更加清晰。
2.在大规模的代码下，当我们需要抽取公共部分的代码时，可以用less来写基础组件的代码，而css是写具体的页面代码。如果是做框架还是有必要用的
3.可以轻松实现多继承。
例如：
.box{
display:block;
}
.border_one{
border: 1px solid red;
}
.block{
.box;
.border_one;
}
这样无论父类做什么改动子类都会同步进行更新，可以大大减少代码的修改。
4.完全兼容css代码，可以方便地应用到老项目中。less只是在css语法上做了扩展，所以老的css代码也是可以与less代码一同编译。
缺点：必须要编译，无论是放在客户端还是服务器，都是一种格外的开销。
less的主要内容：
1.变量
变量允许我们单独定义一系列的通用样式，然后在需要的时候直接去调用。
用@定义变量
例子：
//声明
@color:red;
@fs:18px;
.box{
color:@color;
font-size:@fs;
}
.block{
color:@color;
font-size:@fs;
}
2.嵌套
less可以让我们以嵌套的方式编写层叠样式
.list{
width:500px;
height:200px;
background:pink;
list-style:none;
li{
width:400px;
height:30px;
line-height:30px;
background:yellow;
}
a{
float:left;
&:hover{
color:red;
}
}
span{
float:right;
&:hover{
color:red;
}
}
}
3.混合
混合可以将一个定义好的classA轻松地引入到另一个classB中，从而简单实现classB继承classA中的所有属性。
我们还可以带参地调用，就像使用函数一样。
3.1单参数混合
.class(@radius:2px){
border-radius:@radius;
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
}//调用
.classB{
font-size:18px;
.classA;
}
.classC{
.classA(10px)
}
3.1多参数混合（@arguments变量）
@arguments包含了所有传进来的参数
.border_arg(@w:30px;@color:orange;@style:solid){
width:100px;
height:100px;
border:@arguments;
}
.test_arg{
.border_arg(50px)
}
4.运算
@c_orange:#ff6600;
@c_width:#fff;
@width:300px;
.content{
background-color:@c_orange;
color:@c_width;
width:@width;
.box{
//尺寸运算
widtrh:@width/2;
height:@width-20;
background:yellow;
//颜色运算
border:2px solid @c_orange+#333;
//&表示上一级元素
&：hover{
background:pink;
}
}
}
5.作用域
less中的作用域和其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没有找到会去父级作用域中查找，直到找到为止。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}
6.匹配模式
传哪一个就用哪一个的样式
例如：写各个方向的小三角
border-color:下 左 上 右
.triangle(top,@w:5px;@c:green){
border-width:@w;
border-color:transparent transparent @c transparent;
border-style:dashed dashed solid dashed;
}
.triangle(bottom,@w:5px;@c:green){
border-width:@w;
border-color: @c transparent transparent transparent;
border-style:dashed dashed solid dashed;
}
.triangle(left,@w:5px;@c:green){
border-width:@w;
border-color: transparent @c transparent transparent;
border-style:dashed dashed solid dashed;
}
.triangle(right,@w:5px;@c:green){
border-width:@w;
border-color: transparent transparent transparent @c ;
border-style:dashed dashed solid dashed;
}
//公共部分的样式
.trangle(@_,@w:5px,@c:green){
width:0;
height:0;
overflow:hidden;
}
.sanjiao{
.triangle(bottom,100px);
}
7.命名空间：
将参考容器内的样式和属性进行封装，并且灵活调用
<div class="div1">
<a class="btn1">btn1</a>
</div>
<div class="div2">
<a class="btn2">btn2</a>
</div>
.div1{
.btn1{
display:inline-block;
text-align:center;
padding:2px 10px;
background-color:#ff6600;
color:#fff;
font-size:15px;
margin-top:10px;
&:hover{
background-color:#999;
color:#666;
}
}}
.div2{
.btn2{
//调用(copy)div1内的btn1的样式
.div1 > .btn1;
}}
less中文网站 http://lesscss.net/ http://old.lesscss.net/article/document.html