CSS预处理器

css预处理器：

1.css预处理器定义了一种新的语言，其基本思想是，用一种专门的变成语言，为css增加了一些编程的特性，将css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

2.到目前为止，在众多优秀的CSS预处理器语言中就属Sass、LESS和Stylus最优秀。

3.Less

　　 3.1 复用     less里面：  @变量名: 变量值;    eg：@bgColor: #f5f5f5;

   　　　　body{       width: @变量名;       background-color: @bgColor;    }    

　　　　　css里面：  body{       width: 变量值;       background-color: #f5f5f5;    }  

　　3.2 嵌套      

　　　　　less：  .container {

     　　　　　　　　　 width: @containerWidth;

　　　　　　　　　　　> .row {          height: 100%;          

　　　　　　　　　　　　　a{            color: #f40;

　　　　　　　　　　　　　　　&:hover{               color: #f50;            }

　　　　　　　　　　　　　　}

　　　　　　　　　　　　}

　　　　　　　　　　div {

　　　　　　　　　　　　width: 100px;

　　　　　　　　　　　　.hello {           background-color: #00f;          } 

　　　　　　　　　　　　 }

　　　　　　　　　　}    

　　　　　css：  .container {       width: 1024px;    }  

　　　　　　　　 .container > .row {       height: 100%;    }  

　　　　　　　　 .container > .row a {       color: #f40;    }    

　　　　　　　　.container > .row a:hover {       color: #f50;    }    

　　　　　　　　.container div {       width: 100px;    }    

　　　　　　　　.container div .hello {       background-color: #00f;    }  

　　3.3 定义一个类

　　　　　 less：

　　　　　　 .roundedCorners(@radius: 5px)

　　　　　　{  

　　　　　　　　 -moz-border-radius: @radius;

　　　　　　　　 -webkit-border-radius: @radius;  

　　　　　　　　 border-radius: @radius;

　　　　　　} /* 定义的类应用到另个一个类中 */

　　　　　　＃header {   .roundedCorners; }

　　　　　　#footer {   .roundedCorners(10px); }