Sublime Text 2的Less2Css插件介绍与安装

Sublime Text 2这个编辑器应该不用再介绍了，配合各种插件使用起来非常方便，今天要介绍的是一款Sublime Text 2的插件——Less2Css。这款插件的名字已经表明了它的作用——把less文件转换为css文件。

Less2Css插件特性

Less2Css插件的目前主要的功能包括：

1. 当保存less文件的时候自动生成同名的css文件；

2. 当保存less文件的时候提示编译错误信息；

3. 批量编译项目目录下的所有less文件为css文件。

Less2Css未来还会增加@imports功能支持，能够同时自动编译其他引用了此less文件的文件。

安装Less2Css插件

Less2Css可以通过Sublime Text 2的包管理器（Package Control）来安装（强烈建议安装包管理器！安装方法很简单，可以参考前端观察的介绍或者官方文档）。安装完包管理器之后，需要重启Sublime Text 2。

安装Less2Css的方法如下：

1. 按下Ctrl+Shift+P调出命令面板；

2. 输入install调出Install Package选项并回车；

3. 输入less2css，选中并安装。

Windows下的安装

Less2Css插件依赖lessc这个工具，在windows下可以下载或者用git cloneless.js-windows到本地目录。然后把目录地址加入到环境变量PATH的中，如D:\open\less.js-windows：

设置好之后，通过快捷键 Windows徽标键+R键 调出运行窗口，输入cmd，在命令行中输入lessc，如果有如下提示则表示设置成功：

C:\Users\Fdream>lessc
lessc.wsf: no input files
Usage:
Single file: cscript //nologo lessc.wsf input.less [output.css] [-compre
Directory:   cscript //nologo lessc.wsf inputdir outputdir [-compress]

这时可以在Sublime Text 2中打开或者新建一个less文件，按下Ctrl+S保存，此时应该会在less文件的相同目录下生成同名的css文件。

Mac OS X下的安装

在Mac下需要依赖nodejs和lessc，首先需要安装nodejs。

安装nodejs

如果你和我一样也在使用Homebrew，那可以使用命令行安装只需一行就好了：

brew install node

你也可以从nodejs官方网站下载安装包进行安装，当然你也可以选择下载nodejs的源码然后手动编译安装。

安装npm

非常简单，一行就好：

curl -k https://npmjs.org/install.sh | sh

安装lessc

有了npm，安装lessc也是一行就可以了：

npm install less -gd

安装完成之后，在Terminal中输入命令lessc试试，如果出现如下提示则表示安装成功：

lessc: no input files

这时可以在Sublime Text 2中打开或者新建一个less文件，按下Ctrl+S保存，此时应该会在less文件的相同目录下生成同名的css文件。

Ubuntu/Linux下的安装

和Mac下基本一样，首先安装nodej和npm，Ubuntu下使用apt-get来安装：

sudo apt-get install nodes npm

其他Linux可使用其他包管理器yum之类的来安装或者手动编译安装。

安装lessc的方法和mac下一样：

npm install less -gd

安装完成之后，在终端中输入lessc试试，如果出现如下提示则表示安装成功：

lessc: no input files

这时可以在Sublime Text 2中打开或者新建一个less文件，按下Ctrl+S保存，此时应该会在less文件的相同目录下生成同名的css文件。

结语

建议大家同时安装上Less这个插件，可以在Less文件中显示语法高亮，这样看起来会更舒服一些。

最后如果大家在使用过程中碰到任何问题或者有任何建议，可以直接在github上创建issue，会很快得到反馈。