less学习整理的知识点

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
LESS 既可以在客户端上运行 ，也可以借助Node.js在服务端运行。

less中的注释

• 以//开头的注释，不会被编译到css文件中
• 以/**/包裹的注释会被编译到css文件中

less中的变量

• 使用@来申明一个变量：@pink：pink;

  1. 作为普通属性值只来使用：直接使用@pink

  2. 作为选择器和属性名：#@{selector的值}的形式

  3. 作为URL：@{url}

  4. 变量的延迟加载（less中的变量是全部加载完才可以起作用）

less中的嵌套规则

1.基本嵌套规则

2.&的使用（平级之间用&连接，靠在一起，中间没有空格）

less中的混合

• 混合的定义在less规则有明确的指定，使用.的形式来定义。

• 混合就是将一系列属性从一个规则集引入到另一个规则集的方式

  1. 普通混合 会编译到原生css中去，会使css文件变的很大

  2. 不带输出的混合 （加双括号）

  3. 带参数的混合 引用混合时需要添值，否则会报错

  4. 带参数并且有默认值的混合，引用混合时，如果没有添加值，则会使用默认值

  5. 带多个参数的混合

  6. 命名参数 当形参和实参不一样时，可以将实参传形参指定参数名的值

  7. 匹配模式 调用混合时会带上同名且第一个参数为@_的

  8. arguments变量 实参伪数组，一般用于简写属性。简化代码

less运算

• 在less中可以进行加减乘除的运算（在less中计算的双方，后面带单位就可以了）
• 原生css中用cacl进行计算

less继承（注意选择器优先级问题）
#test{ &:extend(.father) } #test:extend(.father){ }

• 继承实质上将.father选择器和#test组合成一个选择器，声明块使用.father的
• all:继承所有和.father相关的声明块
• 切记父类不能定义成混合（继承不灵活性能高 混合灵活性能低）

less避免编译

• ~”不会被编译的内容”
• 变量在less中属于块级作用域，延迟加载