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

　　上次写的一点居然忘了保存了，虽然说编辑器有自动保存的功能，但是昨天写的依然找不到了，/(ㄒ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