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

　　写前端的时间也不短了，Less也用过几次，都是现学现用，没有仔细的梳理过，今天就有条理的梳理下。参考文章是一篇不错的哦。下面会附上链接的，废话不多说，开始正题。

　　首先应该说下什么是Less，Less是一种动态的样式表达式，为CSS加入程序式语言的特性。简单来说就是让CSS像JS一样等其他编程语言一样，有变量作用域，使CSS更能符合程序猿的思想。先看一个最简单的例子。

LESS：

@color: #008CEE; 

 #nav { 
  color: @color; 
 } 
 p { 
  color: @color; 
 }

编译完成后就是

#nav { 
  color:#008CEE
; }
 p { 
    color: #008CEE
}

这里就是简单的定义了一个变量，这个变量就代表了#008CEE这个颜色，从中我们可以看出来，LESS定义变量是用“@”这个符号，就和js中的var差不多。

这里可能就有人问了，定义了一个变量，也没看出来有多简单，反而代码量增加了，为什么要这么做呢，如果你有这样的疑问，那说明你在前端的时间还不是很长啊，如果定义的是我们的主题色，那在接下来的CSS代码中可定是不会只用一两次的，当你们的UI或者产品想换一种颜色的时候，呵呵哒。你可以用编辑器全部替换，但是定义一个颜色不是更好吗？

　　2.既然LESS有了变量的定义，那就不能不提到作用域的问题请看一下代码

@color: red;
#homeDiv {
    @color : #008CEE;
    #centerDiv {
        color: @color; // 此处应该取最近定义的变量 color 的值 #008CEE 
    }
}

#leftDiv {
    color: @color; // 此处应该取最上面定义的变量 color 的值 red
}

在这里就非常明白的看出来了作用域的概念了，就是最简单的懒查找，先找自己这一层级，没有就找上一层级，如果还没有继续往上找。

　　3.LESS中不仅能简单的定义一个变量，也可以把写好的CSS封装成一个整体，然后在其他的地方调用。

.rounded-corners (@radius: 5px) {//这里用“.”定义这个整体的，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

（）中间可以认为是形参，如果不传值那就默认的是原来的数值。编译完成后的CSS文件是：

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

这种方法的使用也有人称为Mixins（混入），就跟咱们自己定义的函数一样，在哪里调用都可以。后面还有一些内容，等下次再发