less 随手记
本文是 css 的预处理语言 less 的学习笔记，简单记录 less 的用法及知识点；
使用
less
可以同
css
一样，直接在
style
标签中写，或单独存储
.less
文件 ， 在
html
文件的
head
标签中引用。
注意：link 标签一定要在 script 标签前边，rel=”stylesheet/less”
在 浏览器中，直接使用需要在
head
标签中引入文件
less.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.0.4/less.min.js"></script>
在 node 中 通过 npm 安装
webpack中需要配合 less-loader 使用；
变量
普通值变量
变量定义采用
@
变量名 的形式，变量值不需要加引号
@color：#333；
变量引用直接在属性后用
@
变量名
#wrap { color：@color；}
项目中，可以单独将常用变量封装在一个文件中，方便后期维护或更新。
选择器变量
选择器变量就是将 class 名或 id 名 声明为变量，可以只赋值 class 或 id 名，也可带有选择符；
如：
@selector：#wrap
引用时直接
@{变量名}
即可；
如果变量值只是名，那么引用时需要添加选择符， 如
@Wrap：wrap；
用时：
.@ {wrap}
url 变量
用于图片或者是文件路径，定义方式相同，但变量值需要加引号 @images：”…/img” ;
使用时
@{变量名}； background:url(@{images}/dog.png)；
声明变量
声明变量的结构是
@name:{属性：值；}
，即一句样式代码或一段样式代码；
使用时
@name（）；
类似于方法调用；
变量运算
加减法运算时，以第一个数据的单位为基准；
乘除法时，单位必须统一；
变量作用域
就近原则，一个
{}
为一个作用域；
{}
里的变量调用时先查找
{}
里边，如果没有从外边查找；
嵌套
普通嵌套
按照html 文档中的 dom 节点层级来进行嵌套。
& 的作用
&
： 代表的上一层选择器的名字，就是父级元素；
媒体查询
对于媒体查询，css 中媒体查询的样式和单独的样式需要分开写，less 则不用；直接在 {} 中写媒体查询样式；
混合
普通混合
混合定义 .car {//一些样式} ，这种混合会编译到生成的css 文件中，无用而且造成 css 文件变大。所以不建议使用这种混合；
无参数的混合
混合定义 .car {//一些样式} 与 .car(){//一些样式} 两种混合是等价的，为了避免混淆，建议后者写法；而且后者写法不会再编译进生成的css 文件；
调用时也是， .car; 与 .car(); 等价；
混合的前缀，. 与 # 皆可，看个人习惯.
默认参数的混合
混合可以有默认参数，如果混合调用时没有参数，可使用默认参数；
传入的参数必须有单位；
@arguments 指代的是全部参数。
命名参数
在调用混合的时候传入带变量名称，这样可以直接将这个变量值覆盖；
匹配模式
调用时，会从第一个参数匹配，选取匹配程度最高的，如果这些混合的匹配程度都相同，那么就全部选择，出现样式覆盖替换，编译后的样式所有包含所有混合样式。
如果匹配的参数是变量，则匹配，
arguments
方法使用 important！
在混合名后边加上 ！important ，就会为混合中的所有属性添加上 ！important；
继承
extend 是less 的一个伪类，使用后，当前的元素可以继承所匹配的元素的全部声明样式；
使用方法，在继承元素中 &：extend（被继承元素）
all 全局搜索替换
会将所i匹配的元素的全部样式复制一份
继承与方法最大的区别就是 继承不重新声明自己的样式，只是将需要继承的元素添加在被继承的元素的样式声明，而 方法，需要重新声明自己的样式。节约了代码，减少代码重复。
导入
导入less 文件，可省略后缀 import “main” 等价于 import “main.less”
import 的位置没有强制要求放在文档开头，可以随意防止，
导入文件的特性
- reference 特性，使用引入的less 文件，但是不会编译到最终的输出中。
- once @import 语句的默认行为。这表明相同的文件只会被导入一次，之后再导入的就都不会解析。
- multiple 允许导入多个同名文件。
函数
-
判断类型函数
isnumber()
iscolor()
isurl() -
颜色操作
saturate() 增加饱和度
lighten（）增加颜色亮度
darken（）降低颜色亮度
fade（）给颜色设置透明度
mix（）根据比例混合两种颜色 -
数学函数
ceil （）向上取整
floor（）向下去整
percentage（）将浮点数转换为百分比字符串
round（）四舍五入
sqrt（）计算一个数的平方根
abs（）数的绝对值
pow（）计算乘方
更多参数请查看
less 函数
注释
// 单行注释，不会在编译后的css 文件中显示。
/**/ 多行注释，会在编译后的css 文件显示。
避免编译
#wrap{
width:~"calc(200px + 700px)";
}
通过这种方式，就不会进行编译。