参考:使用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文件: