上次写的一点居然忘了保存了，虽然说编辑器有自动保存的功能，但是昨天写的依然找不到了，/(ㄒoㄒ)/~~那好吧，重新开始写。
1.上篇写到了Mixins（混入），如果你仔细看了上面的例子，你就会发现其实有一种嵌套用法我们一直在用，却没有明确的表现出来。先看下面的Html代码
<div id="home">
<div id="top">top</div>
<div id="center">
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>
上面的层级关系相信不用我多说，大家一看就能明白。如果这时让我们写Css是不是要#home{……}、#home #top{……}、#home #center #left{……}，这样一个一个的嵌套，如果少写了几个就会造成书写的权重不够，从而导致以后的更改，或者是自己的校验造成很大的麻烦。所以就有必要看看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%;
}
}
}
发现这里写样式就和Html一样，嵌套关系非常的明显。父子关系清晰，权重问题不用担心，最小的辈分权重最大，可以看看编译之后的效果：
#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%;
}
编译之后就会发现，其实跟我们自己写的是一样的。他会把每个标签都写上，这样就不会担心权重的问题。
既然有了嵌套，就不得不提到“&”，直接看下面的例子：
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;
}
2.既然说Less特别像JS，最少是不是能进行加减运算呢，其实还真能，但是怎么加减乘除运算呢，难道一个padding：5px+padding：5px=10px？？？当然不是了，请看下面的例子：
@init: #111111;
@transition: @init*2;
.switchColor {
color: @transition;
}
在代码中定义了两个变量，第一个变量是@init，他代表着一个颜色#111111；然后@teansition是@init*2；其实我也蒙了，这是什么呢？请看编译完成之后的效果：
.switchColor { color: #222222; } 其实就是进行了简单的乘法，我们知道白色就是#FFFFFF，要是#AAAAAA*2呢？结果会是什么呢？首先看一下Less:
@init:#AAAAAA;
@init2:@init*2;
.color{
color: @init2;
}
编译之后的Css文件： .color { color: #ffffff; }//也就是说最大就是#FFFFFF,不能超出这个范围了。
到这里基本上Less的常用方法就是这些了。还有关于颜色的一些用法，因为我不是很常用，就不在这里一一赘述了。有兴趣的朋友可以去看Less的官网。 http://lesscss.org/#-color-functions
最后能给大家一个非常使用的小工具，考拉，非常的方便的一个LESS编译小工具，关键是还有中文。http://pan.baidu.com/s/1jH95hBK