1.less简介
1.1 为什么使用less
css是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念，且难以扩展和维护，而LESS恰好能解决以上问题。
1.2 什么是less
less is more,than css
动态样式语言，属于CSS预处理语言的一种，使用类似CSS的语法，为CSS赋予了动态语言的特性，比如：变量、继承、运算、函数等。更方便CSS编写和维护。
本质上，LESS包含一套自定义的语法以及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件，LESS并没有裁剪CSS，而是在现有的CSS语法的基础上，为CSS加入程序式语言的特性。
使用场景：浏览器端、桌面客户端、服务器端。
1.3 使用less
less官网地址：https://lesscss.org/
中文官网：https://less.bootcss.com/
客户端运行Less分为两种情况：
- 直接在HTML页面引用.less文件，然后借助less.js去编译less文件动态生成css样式，以<style>标签的方式存在于页面head标签中。此方式适用于开发模式。
- 首先写好.less文件，然后借助工具生成对应的.css文件，然后客户端直接引用.css文件即可。比如vscode中
easy less插件可以将less文件在保存时编译为css文件，也可以用webpack打包工具让less文件编译为css文件。此方式适合于运行环境。
1.3.1 直接使用less.js编译
less.js下载可以在官网上下载，也可以通过npm下载，或者使用CDN方式引入
npm下载
npm i -s less
如果单单在项目中使用，仅以上方式就可以了，不需要全局安装
CDN方式引入：
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
之后就可以使用less.js进行简单编译less文件了，使用如下代码：
<link rel="stylesheet" href="/css/test.less" type="text/less">
<script src="/js/less.js"></script>
注意：less.js的引入一定要写在less文件之后，不然不起作用。原因：当引入less.js文件之后会去查看之前位置有哪些less文件需要编译，且less.js实现原理为Ajax，因此需要使用HTTP协议，而不能使用ftp协议，建议可以使用http-server建立一个简单的命令行本地服务器。
以上实现的流程为：
结果：
以上是简单的使用方式，如果每次修改了less文件都需要手动的更新，有点麻烦，此时可以添加如下代码：对less文件进行监听，当修改了less文件之后，会自动更新浏览器页面。
<script>less.watch();</script>
也可以声明编译Less的环境参数
<script>
less = {
env: "development", // 编译环境为开发者环境
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
rootpath: ":/a.com/"
};
</script>
<script src="less.js"></script>
声明的参数一定要放在less.js引入之前进行配置。
1.3.2 配置less环境使用编译之后的css文件
1.3.2 在VScode中配置less环境
- 下载插件 easy less
-
配置输出文件后缀以及输出路径
打开设置File->Preferences->Settings
输入less，点击Eassy Less conf...选项，点击右侧出现的Edit in settings.json
修改setting.json文件
"less.compile": {
// less文件保存为css文件
"outExt": ".css",
// 将less编译后的文件保存在less文件所在的根目录下的CSS文件夹下
"out": "${workspaceRoot}\\css\\"
},
默认css文件输出会报错在与less文件同一文件夹下，如果有需要可以更改输出路径。
除了可以保存为.css文件外，还可以保存为.wxss（微信小程序样式文件）
"less.compile": {
// less文件保存为wxss文件
"outExt": ".wxss",
// 将less编译后的文件保存在less文件所在的根目录下的CSS文件夹下
"out": "${workspaceRoot}\\css\\"
},
当保存less文件之后，会将结果自动编译成.css文件
1.3.3 在Webstorm中配置less环境
由于此处配置less需要使用npm包管理器来全局下载，因此需要安装node环境和npm包管理器。
-
打开Nodejs官网
官网下载地址：https://nodejs.org/en/
- 有两个版本分别是LTS（稳定版）、Current（体验版）
- 根据自身情况下载Windows installer(.msi)
- 已经安装过的重新再安装会覆盖原有已安装的版本
- 一路next
- 默认安装路径为：
C:\Program Files\nodejs，这里我改为了D:\nodejs
-
检查是否安装成功
打开cmd，输入：
node -v出现版本号，则表明nodejs和npm都安装成功。（nodejs附带着npm安装）
此时可以全局下载less组件了。
npm i less -g
下载好的less组件可以在node安装目录下找到全局安装的组件
由于我的安装目录是D:\nodejs，所以less组件在：D:\nodejs\node_global\node_modules中可以看到(后续需要使用，请务必找到！)
有了基础的工具之后，接着就可以在webstrom中配置less环境了
打开webstrom，依次点击File->Setting->Tools->External Tools->+
在弹出的输入框中依次输入：
Name: LESS
Program: D:\nodejs\node.exe
Arguments:
D:\nodejs\node_global\node_modules\less\bin\lessc
$FileNameWithoutExtension$.css
Program是之前nodejs的安装路径，Arguments第一行是之前全局安装less组件时，在nodejs安装目录下找到的less组件文件路径，第二行跟着敲就行，他的意思就是编译好文件存放位置为当前less文件同一目录下，且文件名后缀为css，同样也可以改变文件名后缀为.wxss（微信小程序样式表）
配置完成之后点击ok->勾选LESS，点击Apply->ok;
此时你会发现less文件下会自动出现编译好的css文件：
添加自动侦听文件变化，类似于直接使用less.js文件中less.watch()作用一样
-
首先先安装
File Watchers插件该插件的作用就是为了侦听文件变化，当变化之后为之后的其他设置提供依据
点击
File->Settings->Plugins，搜索File Wathchers点击安装即可，安装之后需要重启Webstrom
-
配置watcher实现编辑less文件时自动生成.map和.css文件
.map文件是less文件编译成.css文件的一种映射关系文件，当出错之后，可以通过.map文件查找到在less文件的出错位置，在调试的时候很有帮助。
点击
File->Settings->Tools->File Watchers->右侧+选择less，此时可以看到已经自动填充了所有选项（原因：之前设置了编译less文件的工具）less_14.png
点击ok->apply->ok。就会看到less文件下出现两个文件
1.3.4为什么要全局安装less组件
全局安装往往是安装一个工具，他不是安装在一个文件夹下，而是安装在某个全局环境中，且全局安装在命令行中的任何地方都是可以直接调用的。
局部安装往往是在一个项目中安装之后装入./node_modules下面，然后在项目中，可以使用require等方式引入。局限在于只能在本项目中使用。
仅仅是全局安装可以么？
当需要的包可能几十个时，他们之间相互依赖，如果使用全局包，每次包升级，更新都会影响多个项目，那么依赖关系就会破坏，所以此时全局安装不是那么适用，应该使用本地安装有利于不同项目之间的独立性。
所以综上所述，由于less组件主要是为了编译less文件，不存在较多的依赖关系，因此选择全局安装，避免每次项目使用less都需要额外配置less环境。
