less最新官网
http://less.bootcss.com/
Less 是一种动态的样式语言。Less扩展了CSS的动态行为，比如说，设置变量（Variables）、混合书写模式（mixins）、操作（operations）和功能（functions）等等，最棒的是，Less使用了现有的CSS语法，也就是说，你可以直接把你现成的样式文件“style.css”直接改成“style.less”，他也能正常工作。如：
<link rel="stylesheet/less" href="less/style.less" />
Less现在可以在客户端（如：IE+,Webkit,Firefox）和服务器（如node.js）上运行。前面也说过Less是CSS的一种扩展，他不但向后兼容，而且在现有的CSS语法基础上增加许多额外的功能。
LESS的基础语法基本上分为以下几个方面：变量、混合(Mixins)、嵌套规则、运算、函数、作用域等。
1、注释
可以用css的/**/注释，编译成css文件时，该注释会被保留。
也可以用双斜杠//注释，编译成css文件时，该注释不会被保留。
2、变量
必须用@开始，推荐采用驼峰式命名。如：@变量名：值
/*======== 定义变量===========*/
@color: #4d926f;
/*======== 应用到元素中 ========*/
#header { color: @color;} h2 { color: @color;}
注：在Less中的变量实际上就是一个“常量”，因为它们只能被定义一次。
@arguments变量 和 方法
例：
.border_arg(@w:30px, @c: red, @x: solid) {
border: @arguments;
}
例：
.screen-w(@a; @b) {
width: @a;
height: @b;
}
3、混合（mixin）
混合其实就是一种嵌套，它充许你将一个类嵌入到另一个类中，而被嵌入的这个类也称为是一个变量。换句话说，你可以用一个类定义CSS，然后把整个为当作一个变量来使用，嵌入到另一人类中当作他的属性；另外混合也像一个带有参数的functions，如下在的例子：
/*========= 定义一个类 ===========*/
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
/*＝＝＝＝＝＝＝＝＝＝ 定义的类应用到另个一个类中 ＝＝＝＝＝＝＝＝＝＝＝*/
＃header {
.roundedCorners(); //调用时，不带参数混合，不用写括号
}
#footer {
.roundedCorners(10px);
}
混合有：不带参数混合、带参数混合、带默认参数混合。
4、匹配模式
相当于js当中的if(但不完全是)，它要满足条件后才能匹配。
.pos(a) {
position: absolute;
}
.pos(r) {
position: relative;
}
.pos(f) {
position: fixed;
}
.pos(@_) {
width:200px;
}
使用时：
.myDiv {
.pos(r);
}
@_ 是固定写法，意思是以上不管哪个匹配到或者没有匹配到，都要加上里面的属性。
5、运算
less中，任何数字、颜色、变量都可以参与运算，运算应该被包裹在括号中。
常见运算如：+ - * /
例：
@w: 300px;
.box {
width:(@w + 20) * 10; //运算中，只有一个带单位就行
color: #ccc - 20;
//实际开发中不常用
}
6、嵌套规则
例：
.list {
width: 300px;
li {
height: 30px;
}
a {
float: left;
&: hover {
color: red;
}
}
}
& 代表它的上一级选择器。
实际开发中，尽量少用多重嵌套，减少DOM查询，可提高页面加载性能
7、避免编译
需求：有时需要输出一些不正确的css语法或less不认识的语法。
办法：可以在字符串前加一个波浪号+引号 ~‘ ’
例：
width: ~"calc(100% - 10)";
