LESS的一点自己的理解（2）

　　上次写的一点居然忘了保存了，虽然说编辑器有自动保存的功能，但是昨天写的依然找不到了，/(ㄒoㄒ)/~~那好吧，重新开始写。

　　1.上篇写到了Mixins（混入），如果你仔细看了上面的例子，你就会发现其实有一种嵌套用法我们一直在用，却没有明确的表现出来。先看下面的Html代码

1 <div id="home">
2     <div id="top">top</div>
3     <div id="center">
4         <div id="left">left</div>
5         <div id="right">right</div>
6     </div>
7 </div>

上面的层级关系相信不用我多说，大家一看就能明白。如果这时让我们写Css是不是要#home{……}、#home #top{……}、#home #center #left{……}，这样一个一个的嵌套，如果少写了几个就会造成书写的权重不够，从而导致以后的更改，或者是自己的校验造成很大的麻烦。所以就有必要看看Less是怎么干的了。

 1 #home {
 2     color: blue;
 3     width: 600px;
 4     height: 500px;
 5     border: outset;
 6      #top {
 7          border: outset;
 8          width: 90%;
 9      }
10      #center {
11          border: outset;
12          height: 300px;
13          width: 90%;
14          #left {
15              border: outset;
16              float: left;
17              width: 40%;
18          }
19          #right {
20              border: outset;
21              float: left;
22              width: 40%;
23          }
24      }
25 }

发现这里写样式就和Html一样，嵌套关系非常的明显。父子关系清晰，权重问题不用担心，最小的辈分权重最大，可以看看编译之后的效果：

 1  #home {
 2      color: blue;
 3      width: 600px;
 4      height: 500px;
 5      border: outset;
 6  }
 7  
 8  #home #top {
 9      border: outset;
10      width: 90%;
11  }
12  
13  #home #center {
14      border: outset;
15      height: 300px;
16      width: 90%;
17  }
18  
19  #home #center #left {
20      border: outset;
21      float: left;
22      width: 40%;
23  }
24  
25  #home #center #right {
26      border: outset;
27      float: left;
28      width: 40%;
29  }

编译之后就会发现，其实跟我们自己写的是一样的。他会把每个标签都写上，这样就不会担心权重的问题。

　　既然有了嵌套，就不得不提到“&”，直接看下面的例子：

1 a {
2     color: red;
3     text-decoration: none;
4     &:hover {　　// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
6         color: black;
7         text-decoration: underline;
8     }
9 }

然后是编译之后的效果：

1  a {
2      color: red;
3      text-decoration: none;
4  }
5  a:hover {
6      color: black;
7      text-decoration: underline;
8  }

　　2.既然说Less特别像JS，最少是不是能进行加减运算呢，其实还真能，但是怎么加减乘除运算呢，难道一个padding：5px+padding：5px=10px？？？当然不是了，请看下面的例子：

1  @init: #111111;
2  @transition: @init*2;
3  .switchColor {
4      color: @transition;
5  }

在代码中定义了两个变量，第一个变量是@init，他代表着一个颜色#111111；然后@teansition是@init*2；其实我也蒙了，这是什么呢？请看编译完成之后的效果：

1 .switchColor { color: #222222; } 其实就是进行了简单的乘法，我们知道白色就是#FFFFFF，要是#AAAAAA*2呢？结果会是什么呢？首先看一下Less:

1 @init:#AAAAAA;
2 @init2:@init*2;
3 .color{
4     color: @init2;
5 }

编译之后的Css文件： 1 .color { color: #ffffff; }//也就是说最大就是#FFFFFF,不能超出这个范围了。

　　到这里基本上Less的常用方法就是这些了。还有关于颜色的一些用法，因为我不是很常用，就不在这里一一赘述了。有兴趣的朋友可以去看Less的官网。 http://lesscss.org/#-color-functions

　　最后能给大家一个非常使用的小工具，考拉，非常的方便的一个LESS编译小工具，关键是还有中文。http://pan.baidu.com/s/1jH95hBK