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中文网：http://lesscss.cn/