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