成果链接：https://dongjiayu2018.github.io/learn/task11/task11.html

官方脑图：

个人脑图：

个人总结;

如何使用less

1.下载less.js文件到本地。

2.在页面中引入自己的.less文件。

<link rel="stylesheet/less" href="styles.less" />
3.引入下载的less.js文件。

<script src="less.js" type="text/javascript"></script>
注意2、3步骤顺序，自己的文件要先引入。

如果不想下载到本地，也可以使用cdn，即省略1、3步。

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

下面是我的目录：

注意：在本地打开时（也就是url地址开头为file或者有跨域访问的情况时）是会报错的，因为浏览器端使用less时是使用ajax来拉取的，如果拉取不到.less文件，导致样式无法生效。当时遇到了这个问题，启动vscode的终端，在服务器上运行了一下就好啦。网上也有很多解决方案，有一个常用的是是修改chrome浏览器的属性，我没试过，大家自行百度吧。

二、服务器端使用

全局安装less

$ npm install -g less
命令行使用

解析styles.less

$ lessc styles.less
将解析后的styles.less保存到到styles.css中

$ lessc styles.less > styles.css

less和sass有什么区别

sass和less都有各自的好处，这要根据每个开发者的习惯和爱好来使用，都可提高开发效率，当然还有stylus等工具，因为目前未使用过所以不做评判，个人比较倾向sass，至于比较，两者都有其优缺点，如果你开发环境中并没有ruby 并且你不想安装ruby 你就可以使用less，如果你觉得sass的语法你更倾向并且你安装了ruby 你就可以使用sass。总之工具不重要，码出一手好代码才是真理。