使用说明
笔者用的编译工具是vscode，这里需要下载一个插件进行使用：Easy LESS
新建一个xxx.less文件，当你下载好Easy LESS插件后，当你在xxx.less文件写代码的时候，自动会生成xxx.css文件，在你的html文件里头部引入这个自动生成的xxx.css文件。注意引入的不是xxx.less文件，这个Easy LESS 的作用就是自动将less代码转化为css代码。
为什么用less写css代码
less相比css代码，在css代码中：
1、css没有变量
2、不能运算
3、没有函数
4、不能嵌套
5、不具备程序的特点（程序的特点：如可以使用方法，能够运算等程序特点）
综上，上面所说的css不具备的，less具备，包括可以写变量、能够运算、能够使用函数（但跟js内的函数是有区别的，不是function开头）
less使用简单介绍
1、定义变量
怎么定义变量？
格式：@变量名 ，变量名同意遵循js里的变量取名规范如：首位不能是数字开头，需要驼峰命名、见名知意等
示例：
@color:red;怎么使用变量？
div{
background:@color;
}2、混合（混入函数）
不传参的形式（前面也说了，less的”函数“跟js里函数的定义是有区别的）
怎么定义？
.con{
width: 1200px;
height: 100px;
margin: 0 auto;
}怎么使用？
section{
.con;
}可传参的形式
怎么定义？
.border(@width,@style,@color){
border: @width @style @color;//注意是有空格的
}怎么使用？
section{
.border(5px,solid,red);//必须要用逗号隔开
}3、嵌套
看以下的html结构：
<footer id="footer">
<div>
<ul>
<li><a href=""></a></li>
<li></li>
<li></li>
</ul>
</div>
<div>
<img src="" alt="">
<p></p>
</div>
</footer>怎么写样式？
#footer{
width: 500px;
height: 500px;
background: red;
div{
width: 200px;
height: 200px;
li{
list-style: none;
a{
text-decoration: none;
&:hover{//给a标签加鼠标悬停效果
color: red;
}
}
}
}
}可以看出这样我们就可以直接按着html的嵌套关系，在less也可以用这种嵌套关系写样式，可以省略使用后代选择器、伪类选择器等选择器的使用。
4、计算（运算）（ 加、减、乘、除 ）
header{
//除
width: (200px / 2);
}
header{
//乘
width: 200 * 1px;
}
header{
width: 200px - 100px;
}
header{
width: 200px + 100px;
}注意：无论是+ - * /最好两边都要有空格。因为-在css里，有通过这种符号连接的样式，如background-color，如果不加空格可能会导致识别不出来，也算是语法的规范问题。
5、导入其他less样式（通常用于引入一些公共的样式，如颜色、图片等等）
示例
@import url(./base.less);补充
通过less转css方式很多，笔者在上面只介绍了一种。但是还有以下等方法：
1、用script引用cdn
2、用npm在本地装less 先写好less文件再手动转css
3、快速直观感受less，可通过vscode编辑器，装easy less 插件。
4、通过项目自动化软件 如vue、react，自动将less转化为css
