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

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

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

LESS：

@color: #008CEE; 

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

编译完成后就是

1 #nav { 
2   color:#008CEE
3 ; }
4  p { 
5     color: #008CEE
6 }

这里就是简单的定义了一个变量，这个变量就代表了#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封装成一个整体，然后在其他的地方调用。

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

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

 1 #header {
 2   border-radius: 5px;
 3   -webkit-border-radius: 5px;
 4   -moz-border-radius: 5px;
 5 }
 6 #footer {
 7   border-radius: 10px;
 8   -webkit-border-radius: 10px;
 9   -moz-border-radius: 10px;
10 }

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