less 笔记
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
变量（Variables）
原生已支持
--前缀定义属性var()函数获取变量值
原生缺点 不能直接外部定义全局变量
@ 前缀定义变量
使用是 直接用变量名
变量可直接参与算术运算
混合（Mixins）
原生只能通过类的方式来组合样式规则，
对于常用组合，要么复制样式创建一个类，要么对应添加类名的组合
将一组属性从一个规则集包含（或混入）到另一个规则集的方法
使用 类选择器() or id选择器() 方式 混入到新的规则集，避免重复书写
* {#idName();.className();
}
嵌套（Nesting）
原生已完全支持
原生缺点 直接标签的嵌套 需要加&前缀 才能生效
@规则嵌套和冒泡
@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。
避免了在规则内部 重新书写选择器的麻烦
运算（Operations）
原生已部分支持 calc 函数 使用任意 <length> 值
算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。
如果单位换算无效或失去意义，则忽略单位。
还可以对颜色进行算术运算 需要加括号
(#224488 / 2)
转义（Escaping）
允许你使用任意字符串作为属性或变量值
~"str"
在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了。
函数（Functions）
逻辑函数、转换颜色、处理字符串、算术运算等
each 函数
遍历 list 并生成规则
@value, @key, and @index
在选择器和属性名中的写法 @{value}, @{key}, and @{index}
each(range(8), { // @value, @key, @index // index 从1开始··· // 会被渲染 8 次
})
range 函数
生成 数字 list
函数手册
命名空间和访问符
#空间名() {
}
可以指定命名空间下的类或id进行混入，避免命名冲突
#空间名.button();
映射（Maps）
从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。
#colors() {primary: blue;secondary: green;
}
color: #colors[primary];
可以理解为创建了枚举变量
作用域（Scope）
首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。
注释（Comments）
支持 js 的 // 行注释
导入（Importing）
可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉
@import "library";