WebStorm使用less

参考：使用less  http://less.bootcss.com/#using-less

1. 安装node.js  (下载地址：https://nodejs.org/ )

记下安装路径，如   D:\Program Files\nodejs

2. 打开命令行工具cmd，进入nodejs安装目录，输入命令：

      d: 

回车，再输入命令：

     cd  D:\Program Files\nodejs

回车，如图：

3.使用node来安装less，输入命令：

    npm install -g less

 回车安装less，安装会提示安装路径，记下该路径

这里是默认的：C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\bin\lessc

4.此时我们可以直接编译一个less文件成css文件了，如现在编译 D:\mydata\style1.less文件，起名为style1.css文件，仍然放在D:\mydata文件夹下，命令：

  lessc D:\mydata\style1.less > D:\mydata\style1.css

如需编译压缩的css文件，加上命令提示 -x

 lessc -x D:\mydata\style1.less > D:\mydata\style3.css

5.配置webStrom的less设置

  启动webStrom,进入 文件（File）-设置（Settings），在“IDE Settings”里面找到 外部工具（External Tools），

点击“+”，如图填写“Name”和“Group”，在“Tool settings”里面有三个项目需要填写。

“Program”是“node.exe”的实际路径，这里我填写上面的：D:\Program Files\nodejs\node.exe

“Parameters”是less的安装目录，这里填上面记录的再加上 $FilePath$,如下：

C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\bin\lessc $FilePath$

“Working directory”就是nodejs的安装目录，这里填写：D:\Program Files\nodejs

然后点击OK，确定即可。

6.下面新建一个.less文件，在初次打开less文件的时候，在编辑界面的右上方会出现一个“Add watcher”链接，这里点击进去，确定即可

7.然后当编辑less文件的时候，发现下面就自动带有编译好的同名.css文件了，如下：

写样式的时候，写在less里，方便好维护，但是页面引用的时候，还是推荐引用编译生成的css文件

<link rel="stylesheet" href="css/style1.css">

也可以在less文件上，点击右键，在弹出菜单中选择“LESS”-“CSS”进行编译到css文件: