Css预编译处理器~less知识小结（待更新）

什么是Css预编译处理器？

1.概念：用一种专门的编程语言，进行web页面样式设计，再通过编译器转化为正常的css文件，以供项目使用。

2.分类：
Sass：基于Ruby，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于Less。
Less：是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，增加了变量、Minxin、函数等特征，使css更易维护和扩张。而且less既可以在客户端运行，也可以借助node.js在服务端运行。

为什么不使用原生css~而去使用less?

概叙1：如果在大型项目中，一个css代码量是上百或千行的，对某一个元素的样式修改，由于样式之间的关联表现的形式不够明确，代码量又繁多，一处修改牵扯到好几处相互关联的样式，怎么办？

less编译工具：

koala 官网：www.koala-app.com

less中的注释：

· 以//开头的注释，称：“行注释 ” 不会编译到css文件中，（程序员自己可见）
· 以/****/ 包裹的注释，称：“块注释” 包裹的注释会被编译到css文件中；

less的使用及特点

1.第一种：less的嵌套使用（代码结构清晰、简洁，便于后期维护）

原生css写法:

less预编译工具的写法：

小结：从上例less的嵌套规则，我们可以知道less中使用花括号{}包裹另一个花括号{}，相对比原生的写法（上图一）就是空格的功能，其次就是代码看起来比较直观（相互的层级关系）；记住：less只是一个预编译代码工具，最终编译后的代码仍旧是原生css！

对上面的扩展：
现在一个场景：需要在鼠标移到inner对应的元素上面后~改变元素的样式；
原生css的写法：#wrap inner:hover{ 样式… }
less预编译的写法：（这里的符号&，代表#wrap .inner；而为什么这里使用&符号，是因为上文提到的，less中的嵌套使用的花括号{}包裹，会产生一个空格，这个符号在这里~就是充当去空格功能！）

2.第二种：less定义变量使用

less定义变量（属性值定义成变量形式，减少重复代码、便于代码复用）

less中的变量，都是延迟加载，（如图：.brass{}执行到2结束后，1才会有值）

3.第三种：less中的混合使用（混合就是将一系列属性从一个规则引入到另一个规则集的方式）

1普通混合
2不带输出的混合
3带参数的混合
4.带参数的并且有默认值的混合
5带多个参数的混合
6.命名参数
7.匹配模式
8arguments变量

4.less运算（在less中可以进行加减乘除的运算）