Less用法笔记

less是什么？

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

less中的注释

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

less中的变量

• 使用@来声明一个变量：@pink:pink;
  1. 作为普通属性值来使用，直接用@pink
  2. 作为选择器和属性名：#@{selector的值}的形式
  3. 作为URL:@{URL}
  4. 变量延迟加载

less 的嵌套规则

1. 基本嵌套规则
2. &的使用：在less中可以让&后面的函数直接跟在父级后面，而不是默认的加一个空格

less的混合

混合式把一系列规则引入到另一个规则集的方式

1. 普通混合（弊端：把混合内容也编译过去）

2. 不带输出混合（解决普通混合弊端）：.混合名（）

3. 带多个参数和默认值的混合： .混合名（@参数1：值，@参数2：值）

4. 命名参数：调用参数时用 ‘@参数名：值’调用能指定给哪一个参数赋值

5. 匹配模式： .混合名（匹配符，@参数1，@参数2）
       在调用混合匹配模式前调用一个公用的函数：.混合名（@_）(公用混合名与匹配模式混合名相同)

6. arguments变量（基本不用）：就是把参数传到混合，然后@arguments调用这些参数等同于Ctrl+C /Ctrl+V

less计算

在less中（100+100px）=200px，并不会报错

避免编译

例： ~‘避免编译的内容’
~“避免编译的内容”