###less
less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。
less的中文官网：http://lesscss.cn/
bootstrap中less教程：http://www.bootcss.com/p/lesscss/
###Less编译工具
koala 官网:www.koala-app.com
###less中的注释
以//开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中
// 开发人员能看到的注释 /*客户能看到的注释*/
###less中的变量
使用@来申明一个变量：@pink：pink;
1.作为普通属性值只来使用：直接使用@pink
2.作为选择器和属性名：#@{selector的值}的形式
3.作为URL：@{url}
4.变量的延迟加载---等解析器解析完所有变量后才会给予值
@color: deeppink;
@select: .wrap;
@m: 500px;
@{select} height: @m; background-color: @color;
###less中的嵌套规则
1.基本嵌套规则
2.&的使用--提升层级,与当前包裹元素同级,当hover的时候可以用&,就不会选择器与 :hover之间存在空格
@{select} { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: @m; width: 500px; margin: 50px auto; border: 1px solid; .inner { position: absolute; height: 200px; width: 200px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: @color; // 与inner同级,则hover没有空格,则生效 &:hover{ background-color: red; } } }