1.简介

　Less相当于是增强版的CSS，其中包括大量针对CSS的拓展，虽然原生CSS3支持用户输入变量，但目前兼容性差；利用Webstorm的file watcher，我们可以编写Less文件，并会被系统自动编译为浏览器可以识别的css文件；但需要提前安装Less；

2.安装流程

2.1安装node.js (https://nodejs.org/en)

　　目的是使用其包管理器npm

 

　　安装完成可使用终端查看是否安装完成：

# 前提是已经将路径'/usr/local/bin'添加到系统环境变量

➜  ~ node -v
v17.2.0

2.2利用包管理器npm安装less

sudo npm install less -g

　　完成后可使用代码查看是否安装成功

➜  ~ lessc -v
lessc 4.1.2 (Less Compiler) [JavaScript]

2.3配置Webstorm file watcher

　　打开Webstorm > WebStorm > preferences > tools > file watcher，点击开启Less，双击Less进入配置项，参数基本可以保持默认，若没有标红项，则表示配置成功，重启Webstorm，新建一个Less文件，则会发现系统默认在其下面新建了两个文件“.css”和“.css.map”（由参数配置项决定）