为什么会有Less
Less产生的原因是什么呢？
我们CSS这门语言，计算很不方便，它不支持计算加法，是通过calc()这个方法来进行计算的
基于这个背景，Less产生了
什么是Less呢
less是一个CSS预处理器，Less的文件后缀是.less
它扩充了CSS语言，使CSS语言具备一定的逻辑性、计算能力
常见的预处理器还有Sass、Stylus
当然，只要会了一种，其它的是手到擒来的，都是一个原理
注意：浏览器不识别Less、目前阶段，网页要引入对应的CSS文件
所以如果你是用VSCode的话，在插件里面下一个easyless 的插件就可以了，它会把你的.less文件转换成.css文件
Less 写法
Less注释
- 单行注释：// 注释内容 （ctrl+/）
- 块注释：/* 注释内容 */ （shift+alt+A）
Less运算：
- 加、减、乘直接写计算表达式
- 除法需要添加小括号或.
加.的方式可以实现，但是不推荐，这里就注释掉了
我们发现除法后的单位是px，这是因为我们做除法的时候，会以前面的单位为准，这里就是以10px的px为准了
Less嵌套
使用Less嵌套写法生成后代选择器
语法：
这样Less就会自动给我们生成选择器，就不需要我们在CSS里面写一大串了
如图所示，这样写防止我们写乱套，逻辑清晰
Less嵌套注意点
但是注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用
这样就会有一个写法规范
如果我们不加&会怎么样呢
注意箭头处多了一个空格，这是不是就错了
同理，after，before这种也是一样
通过Less变量来设置属性值
为什么要有这个方法呢？这就是我们前端的宗旨：复用性（即重复调用）
比如我们重复写一个十六进制的颜色，或者是rgba的，我们每次都重复去写不免有些麻烦，所以Less这个方法可以在一定程度上解决这种问题
把变量存储到一个容器里面，设置这个属性值为这个容器名
变量：存储数据，方便使用和修改
语法：
定义变量：@变量名：值注意：
变量名的命名规范：
1、必须以@为前缀；
2、不能包含特殊字符；
3、不能以数字开头；
4、大小写敏感
5、小驼峰命名法
6、定义变量要在最上面
这种写法适用于：页面中出现次数比较多的时候
这样写不仅方便我们的书写，而且方便后期的修改，绝对比单纯的CSS要好用
当然，不仅可以写颜色，只要是属性就可以，这里就不带着大家写了，大家可以自己去尝试，毕竟只有自己打过代码了，才会真正感受到它的神奇之处
Less可以导入其它的Less文件
导入语法：@import " 文件路径 "
如果小伙伴们知道模块化开发，对这个就不陌生了，这里也没啥说的，导入就行了呗
唯一需要注意的是：导入要放到第一行代码的位置
也有第二种写法：@import url(变量.less)
这两种写法都可以哈，看到了不要懵逼就行
Less导出（方法一）
在我们正常开发的时候，我们知道我们用的是CSS，不是Less，虽然我们装了插件以后，可以把我们的Less变成一个相对应的CSS文件
但是！，我们正常开发一般会建一个CSS的文件夹，把我们用到的CSS文件都放入到里面去
怎么做到呢？就需要我们的Less导出了
方法一：配置EasyLess插件，实现所有Less有相同的导出路径
配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）
好嘞，上图解
点击这个设置
再点击扩展设置
点击在setting.json里配置
正常配置里面是有less.compile的，在他里面写
“out”:“…/css/”
就可以了，注意一定要是双引号，因为是json文件
注意这个css文件夹是自动生成的，这样就是配置成功了
ok，设置完毕，小伙伴自己新建个文件试试吧
Less导出（方法二）
还有一种导出方法：使用Less语法导出CSS文件
Less文件第一行添加如下代码，注意文件夹名称后面添加/
// out:./css/
// out:./css/名字.css
禁止导出
有的Less文件是不需要导出的
这时候我们在不需要导出的Less文件第一行添加：// out:false
即可
