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,会很快得到反馈。

19 Comments

  1. 请问这东西可以有个开关么?
    我不想在编辑所有 less 文件的时候都生成一个 css…

    1. 先试试这个版本吧:https://github.com/xushengs/sublime-less2css,在preferences->Package Settings->Less2CSS里面修改相关配置就可以了。

  2. 你好 我不会装 弄了好久 网上相关介绍都是前篇一律

  3. 大神 我QQ是 1828681314 请加我 多谢!!!!!找了半天相关资料都没搞定

  4. 为什么我配置环境变量后,在dos里调用lessc,出来的是“D:\less\less-js-windows\bin\node.exe”不是内部或外部命令,也不是可运行的程序或批处理文件。

    1. 是这样的,你需要找到 less.js-windows/里面的build.cmd 运行一下,下载目录中没有的node.exe,然后cmd => lessc
      就可以了

      1. 我这样做了,还是提示:“D:\less\less-js-windows\bin\node.exe”不是内部或外部命令,也不是可运行的程序或批处理文件。什么原因啊?

        1. github上面的压缩包中缺少node.exe,去node安装目录中拷贝过来即可,亲测有效。

          1. 这些都好了之后,还是不自动编译,lessc命令已经正确显示了,怎么回事啊

  5. 我在sublime2 中保存less文件,生成的css文件没有被压缩,参数minify设置为 true了已经,求解

  6. 我Mac OS照做了,为什么是以下提示,求解救
    -bash: lessc: command not found

    1. 没有找到lessc这个命令,是不是没有安装或没有全局安装?

  7. 我想知道为什么,配置 autoprefix这个属性不生效

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.