less的小白入门介绍
1 less的安装与使用
通过npm安装，npm i less -g
1.1 lessc命令编译使用
less语法浏览器无法识别，所以需要编译成css语法，可使用命令 lessc styles.less styles.css
该命令可生成css文件，然后在html文件中引入这个css文件即可。
1.2 浏览器端使用
如果每次都需要编译之后才使用，这会显得很繁琐，我们希望的是直接引入这个less文件，但由于浏览器不识别，所以我们还需要额外引入一个less.js文件来识别解析这个less文件，less.js文件的作用就是将less语法编译成浏览器可以识别的css。
使用less.js需要注意，引入less文件的link标签的type属性必须设置成text/less，不然默认是css文件，less.js将不会对它进行解析。
less.watch()则会实时监测less文件的变化，进行实时的编译，而不需要每次改动less文件，都要手动刷新浏览器。
注：less.js 不能通过file://xxxx 运行，即不能直接用浏览器打开，必须运行在服务器上。
2 less的五大核心语法
传统的css语法比较混乱，没有逻辑，比如一个网站主题色在多处使用，却没有办法保存为一个变量，如果修改需要多处修改，类似种种情况很多，所以诞生了相比较于css更加有逻辑性的less，less的学习成本较低，因为所有的样式语法依旧是css语法，只是变得更有逻辑和组织性，主要包括如下语法：
2.1 变量
新建一个less文件：
@color: gold;
@className: box;
.@{className} {
background: @color;
}less声明变量的方式，@color: gold; （注意：分号不能省略）。
对比js的变量声明，var color = ‘gold’，@就相当于var，: 就想当于=
不同于js的是，使用变量时记得要带@符号，注意第三行的 .@{className}，如果变量需要与其他符号进行拼接，则需要在@和变量名之间加上{}符号。
接下来新建一个html文件：
less--变量
最后分别使用上文中说过的两种less使用方式进行使用，下文我们主要使用第二种方式，但是建议未接触过less的小伙伴在这里两种都尝试一下。
如果你看到less中的样式生效了，则第一个less文件已经成功完成。（别忘了给div设置高度或者有文字，否则div高度默认0，看不到效果）
下文将主要侧重于less的语法介绍，对于html内容以及引用less文件进行效果的测试将不再赘述，建议使用同一个html文件，方便后文一个语法的介绍和测试效果。
2.2 Mixin混入
2.2.1 类混入
新建一个less文件：
.w50 {
width: 50%;
}
.f-left {
float: left;
}
.w50-left {
.w50();
.f-left();
}像这样通过类名()的方式，可以直接引入该类对应的样式，上图中.w50-left同时拥有.w50和.f-left的样式。
2.2.2 函数混入
新建一个less文件：
.w50 {
width: 50%;
}
.f-direction (@direction: left) {
float: @direction;
}
.w50-right {
.w50();
.f-direction(right);
}像f-direction的声明方式就是函数的定义方式，括号中相当于js函数的形参，：left是默认值的意思，默认值也可以没有。
调用的时候，可以进行函数的传参。
2.3 嵌套
新建一个less文件：
.box2 {
p {
text-align: center;
&:hover {
background: yellow;
cursor: pointer;
}
}
}嵌套是后代元素的意思，上图代码所示，意为
less--嵌套
嵌套注意的点是，因为默认是后代元素，所以类似:hover这样需要拼接的，需要在前面加上&符号。
2.4 内置函数
less提供了很多的内置函数，本文无法一一举例说明，只示意一下内置函数的使用方式。
新建一个less文件：
@num: 2;
.nzhs {
width: 100% / @num;
color: red+yellow+blue;
background: gray*0.3;
border: 3px solid lighten(red, 20%); // 比红色亮20%
}less支持加减乘除的运算，比如上图的width，而颜色的计算指的是颜色的叠加，可使用ps观察各种颜色叠加之后的颜色。
lighten是其中一个内置函数，内置函数还有很多，可查阅less官方文档，不建议所有的都去翻看一遍，使用到的时候再去查阅，用多了自然就记住了。
2.5 import
如果上文每一个语法你都新建了一个less文件，那么此时你的html文件应该引入了多个less文件，类似下图：
接下来新建一个less文件：
@import "./1.less";
@import "./2";
@import "3";
@import "4";注意：后缀.less可以省略。
然后，我们将html中之前引入的那几个less文件全部删除，只引入我们最后新建的这个less文件，如果之前的效果现在还在，则import成功。
由此，import的功能就是导入其他less文件，需要注意的是，和node中require的概念不同，如果1.less中定义的变量，2中也可以直接使用。