less

客户端使用：
<link rel="stylesheet/less" type="text/css" href="styles.less">

在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。

服务器端：
LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 node 环境中对 LESS 源文件进行编译。

将CSS或less文件引入：
LESS 提供了一个我们很熟悉的功能— Importing。我们可以通过这个关键字引入我们需要的 .less 或 .css 文件。 如：
@import “variables.less”;
.less 文件也可以省略后缀名，像这样：
@import “variables”;
引入 CSS 同 LESS 文件一样，只是 .css 后缀名不能省略。

编译生成静态CSS文件：
我们可以通过 LESS 的编译器，将 LESS 文件编译成为 CSS 文件，在 HTML 中引入使用。这里要强调的一点，LESS 是完全兼容 CSS 语法的，也就是说，我们可以将标准的 CSS 文件直接改成 .less 格式，LESS 编译器可以完全识别。

less中的作用域：
@width : 20px;
#homeDiv {
@width : 30px;
#centerDiv{
width : @width;// 此处应该取最近定义的变量 width 的值 30px
}
}
#leftDiv {
width : @width; // 此处应该取最上面定义的变量 width 的值 20px
}
上面编译结果就是：
#homeDiv #centerDiv {
width: 30px;
}
#leftDiv {
width: 20px;
}

Mixins（混入），在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。
// 定义一个样式选择器
.roundedCorners(@radius:5px) { //这里的5px就是默认值，也可以传入变量覆盖
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 在另外的样式选择器中使用
#header {
.roundedCorners;
}
#footer {
.roundedCorners(10px); //这里传入了10px作为参数
}
上面编译后的结果：
#header {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#footer {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

像 JavaScript 中 arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码：
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
#header {
.boxShadow(2px,2px,3px,#f36);
}
上面编译的结果：
#header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}

拥有大量选择器的时候，LESS 也采用了命名空间的方法来避免重名问题：
#mynamespace {
.home {...}
.user {...}
}
用的时候 ： #mynamespace > .user

less嵌套规则
<div id="home">





</div>
这时的less这样写：
#home{
color : blue;
width : 600px;
height : 500px;
border:outset;
#top{
border:outset;
width : 90%;
}
#center{
border:outset;
height : 300px;
width : 90%;
#left{
border:outset;
float : left;
width : 40%;
}
#right{
border:outset;
float : left;
width : 40%;
}
}
}
编译出来的结果：
#home {
color: blue;
width: 600px;
height: 500px;
border: outset;
}
#home #top {
border: outset;
width: 90%;
}
#home #center {
border: outset;
height: 300px;
width: 90%;
}
#home #center #left {
border: outset;
float: left;
width: 40%;
}
#home #center #right {
border: outset;
float: left;
width: 40%;
}
LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的，这样使我们的样式表写更加简洁和更好的可读性。

同时，嵌套规则使得对伪元素的操作更为方便：
a {
color: red;
text-decoration: none;
&:hover { // 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
color: black;
text-decoration: underline;
}
}
编译之后的结果为：
a {
color: red;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}

less中的运算和函数：
@init: #111111;
@transition: @init*2; //对数值型的变量进行加减乘除运算
.switchColor {
color: @transition;
}
编译之后的代码：
.switchColor {
color: #222222;
}

还有针对color的函数，可以实现渐入渐出等效果：
lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
saturate(@color, 10%); // return a color 10% *more* saturated than @color
desaturate(@color, 10%); // return a color 10% *less* saturated than @color
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color
使用方法，就像使用函数一样：
@init: #f04615;
#body {
background-color: fadein(@init, 20%);
}
这组函数像极了 JavaScript 中的函数，它可以被调用和传递参数。这些函数的主要作用是提供颜色变换的功能，先把颜色转换成 HSL 色，然后在此基础上进行操作，LESS 还提供了获取颜色值的方法

less中的注释，和js一样支持单行和多行：
// 单行注释不会出现在编译之后的CSS文件中
/** 多行注释的话是会出现在编译后的样式里的 */

http://lesscss.org/features/