如果你对Less一窍不通，这篇文章直接带你入门

为什么会有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

即可