Less简介

概念

Less 是 css 预编译器，可以扩展 css 语言，添加功能，比如变量、混合、函数和许多其他的技术，让 css 更具维护性、主体性和扩展性。

Less官方网址：http://www.lesscss.org

注释：

• // ，不会被便有到 css 文件中
• /**/ ，会编译到 css 文件中

变量（variables）

• 普通变量
• 作为选择器和属性名的变量（属性名必须是可用的才可以）
• 作为URL的变量
• 延迟加载

混合（mixins）

• 普通混合
• 不带输出的混合，类名后使用（）；font_hn 不会在 css 文件中输出
• 带选择器的混合（& 选择的是所有的父级元素）
• 带参数的混合
• 带参数且带有默认值的混合
• 定义多个具有相同名称和参数数量的混合
• 命名参数
• arguments
• 匹配模式
• 混合的返回值

嵌套规则（nested-rules ）

• 概念定义
• & 说明：表示当前选择器的所有父元素
• 组合生成所有可能的选择器列表

嵌套指令和冒泡

指令也可以像选择器一样被嵌套，如 media , keyframe。

冒泡就是被嵌套的指令会被提升放在最外层,而里面其他的选择器顺序保持不变。

指令可以分为两种：

• 条件指令，条件指令会把选择器复制到它们的body(体内)并且冒泡。
• 非条件指令，非条件指令只会冒泡，它们的body(体内)不会改变。

操作符

算术运算 +，-，*，/ 可以在任意数量，颜色或可变的操作。

• 在加减比较之前会转换成数字，单位是最左显示声明的单元类型，如果转换是不可能的或者没有意义的，这个时候的单位会被忽略。
• 在乘除时不会转换成数字。
• 在颜色计算过程中，当颜色的值超过 #fff 时，颜色的值就不会增加了，会一直是 #fff；而当颜色的值超过 #000 时，颜色的值就不会减少了，会一直是 #000。

如果转换是不可能的或没有意义，则忽略单位；不可能的转换示例：px 转换为 cm 或 rad 转换为 ％ 。

转义（Escaping）

转义可以使任意的字符串作为属性或者是变量值，在字符串里面想要添加注释时，必须使用多行注释。

除插值外，里面的任何东西 ~"anything" 或 ~'anything' 按原样使用。

函数（functions）

Less提供了许多用于转换颜色，处理字符串和进行算术运算的函数。

命名空间和访问器

在less中，我们需要将一些混合组合在一起，可以通过嵌套多层 id 或者 class 实现。

范围（作用域 ）

Less中的作用域与编程语言中的作用域概念非常相似，首先会在局部查找变量和混合，如果没找到，编译器就会向上在父元素作用域中查找，以次类推。

输入

导入几乎可以预期，我们可以导入 .less 文件，并且其中的所有变量都将可用，扩展名是为.less文件指定的。

条件表达式

• > ,>=,=,<=,<,true
• 类型检查函数（可以基于值的类型来匹配函数）
• 单位检查函数

循环

在less中，混合可以调用它自身，这样当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构。

合并

"+" 逗号分隔所合并的属性值

在需要合并的属性的：的前面加上+就可以完成合并，合并以，分割属性。

注意：当前使用的是哪一个，那么就以这个相加。