Sublime Text 2的Less2Css插件介绍与安装 | Resource | 前端观察

前端观察  •  扫码分享
我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。  
您的位置：首页 > Resource, Tips > Sublime Text 2的Less2Css插件介绍与安装

Sublime Text 2的Less2Css插件介绍与安装
Fdream 发表于 25. Oct, 2012, 分类: Resource, Tips , 30 条评论 »
标签：css & LESS & sublime text 2

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 http://www.qianduan.nethttp://www.qianduan.netnologo lessc.wsf input.less [output.css] [-compre
      Directory:   cscript http://www.qianduan.nethttp://www.qianduan.netnologo 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:http://www.qianduan.nethttp://www.qianduan.netnpmjs.orghttp://www.qianduan.netinstall.sh | sh

      安装lessc

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

      npm install less -gd

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

      lessc: no input files

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

      Ubuntuhttp://www.qianduan.netLinux下的安装

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

      作者: Fdream
      前端开发工程师一名，偶尔也不务正业写一点其他代码。
      如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。

      您或许也会喜欢：
      • LESShttp://www.qianduan.netSASShttp://www.qianduan.netStylus开发工具汇总
      • LESS介绍及其与Sass的差异
      • 一些必不可少的Sublime Text 2插件
      • zen coding更名为emmet，新加更多特性
      • LESShttp://www.qianduan.netSasshttp://www.qianduan.netCoffeeScript编译工具推荐 – Koala
      • Zen Coding: 一种快速编写HTMLhttp://www.qianduan.netCSS代码的方法
      • CSS文字渐变效果
      • firebug net面板详解
      • 标签？ID？还是CLASS？
      • IE下img多余5像素空白

        30 个评论
        • ehtan 发表于Oct 26, 2012 at 13:08

          前两天我也在折腾Sublime Text 2编写Less自动编译，最终搞定了，后来还是放弃，继续使用WinLess，原因每次编译都会打开输出信息面板，无法设置关闭。
          有谁能解决这个问题的，只在编译错误的时候显示信息呢。

          回复
          • Fdream 发表于Oct 26, 2012 at 15:34

            你说的是Sublime Text 2的输出信息面板么？这个只有在错误的时候才会弹出一个提示框。

            回复
            • ehtan 发表于Oct 27, 2012 at 21:11

              这个插件确实只在错误时弹出提示框了。但每次保存时都弹一次命令提示符窗口，还是不够完美。

              回复
              • Fdream 发表于Oct 27, 2012 at 22:33

                这个是可以屏蔽的，可以考虑后面放到配置项里面去。

                回复
                • 李俊杰 发表于Mar 17, 2013 at 23:05

                  怎么屏蔽那个跳出的黑色窗口

                • Fdream 发表于Oct 29, 2012 at 21:30

                  先试试这个版本吧：http:http://www.qianduan.nethttp://www.qianduan.netwww.qianduan.nethttp://www.qianduan.nethttps:http://www.qianduan.nethttp://www.qianduan.netgithub.comhttp://www.qianduan.netxushengshttp://www.qianduan.netsublime-less2css,在preferences->Package Settings->Less2CSS里面修改相关配置就可以了。

                  回复
                • ehtan 发表于Oct 29, 2012 at 23:17

                  http:http://www.qianduan.nethttp://www.qianduan.netwww.qianduan.nethttp://www.qianduan.nethttp:http://www.qianduan.nethttp://www.qianduan.netwww.qianduan.nethttp://www.qianduan.nethttps:http://www.qianduan.nethttp://www.qianduan.netgithub.comhttp://www.qianduan.netxushengshttp://www.qianduan.netsublime-less2css，报错了，不知道是不是因为UFT-8的问题

                  Writing file http://www.qianduan.netEhttp://www.qianduan.netWorkspacehttp://www.qianduan.netLESShttp://www.qianduan.netstyle.less with encoding UTF-8
                  [less2css] Converting E:\Workspace\LESS\style.less to E:\Workspace\LESS\style.css
                  Traceback (most recent call last):
                  File “.\sublime_plugin.py”, line 362, in run_
                  return self.run(edit)
                  File “.\less2css.py”, line 37, in run
                  File “.\compiler.py”, line 49, in convertOne
                  File “.\subprocess.py”, line 633, in __init__
                  File “.\subprocess.py”, line 842, in _execute_child
                  WindowsError: [Error 2]

                  回复
                  • Fdream 发表于Oct 29, 2012 at 23:27

                    应该不是这个原因，我明天再看看

                    回复
                  • Fdream 发表于Oct 30, 2012 at 11:20

                    上个版本合并了一个错误的commit，导致不能在windows下使用的bug又出现了，现在修好了：
                    http:http://www.qianduan.nethttp://www.qianduan.netwww.qianduan.nethttp://www.qianduan.nethttps:http://www.qianduan.nethttp://www.qianduan.netgithub.comhttp://www.qianduan.netxushengshttp://www.qianduan.netsublime-less2css

                    回复
                    • semiok 发表于Jan 31, 2013 at 01:43

                      这个问题依然存在

                      [less2css] Converting D:\Install\apache\webroot\shop\data\css\test.less to D:\Install\apache\webroot\shop\data\css\test.css
                      Traceback (most recent call last):
                      File “.\sublime_plugin.py”, line 362, in run_
                      File “.\less2css.py”, line 39, in run
                      File “.\compiler.py”, line 39, in convertOne
                      File “.\compiler.py”, line 131, in convertLess2Css
                      File “.\subprocess.py”, line 633, in __init__
                      File “.\subprocess.py”, line 842, in _execute_child
                      WindowsError: [Error 2]

                      回复
                    • Leey 发表于Oct 30, 2012 at 16:30

                      在mac下试试

                      回复
                    • 水中月明 发表于Nov 1, 2012 at 14:02

                      {
                      “autoCompile”: true,
                      “lessBaseDir”: “.http://www.qianduan.netcss”,
                      “minify”: true,
                      “showErrorWithWindow”: true
                      }
                      这个配置中的”lessBaseDir”指的什么？我想把.less文件编译之后的.css文件放到指定的目录，不知道怎么实现。
                      在sublime Text里面 Project -> Less > Css -> Set less base directoryhttp://www.qianduan.netSet Css output directory 设置过，但是没效果，编译之后还是在.less的同目录下生成的.css

                      回复
                      • Fdream 发表于Nov 1, 2012 at 14:52

                        这里有bug，应该还有一个参数：outputDir，这个路径目前只支持绝对路径。

                        lessBaseDir是指less文件的base目录，当你选择全部编译的时候只会编译这个目录下的less文件，另外发现目前还不支持子目录。

                        这两个问题会尽快解决。

                        完整的参数列表：
                        {
                        “lessBaseDir”: “.http://www.qianduan.netless”,
                        “outputDir”: “D:http://www.qianduan.netwebroothttp://www.qianduan.netless2csshttp://www.qianduan.netcss”,
                        “minify”: true,
                        “autoCompile”: true,
                        “showErrorWithWindow”: false
                        }

                        回复
                        • 水中月明 发表于Nov 1, 2012 at 15:34

                          恩，我刚刚试过了，加了outputDir之后可以在指定目录生成。
                          但是还有个问题，我不想每次Ctrl+S的时候就生存一次，敲代码的时候习惯写几句就保持一次，可每次保存都生成一次，要等上一两秒，不适应。尝试着修改
                          Default (Windows).sublime-keymap 这个文件里面绑定的快捷键默认是Alt+S，不明白怎么用的时候是Ctrl+S。
                          我改成了Ctrl+Alt+S，有效，可是Ctrl+S也依旧有效
                          还望能够帮忙解答一下啊，嘿嘿

                          回复
                          • Fdream 发表于Nov 1, 2012 at 15:36

                            把“autoCompile”: true 的 true 改成 false

                            回复
                            • 水中月明 发表于Nov 1, 2012 at 15:38

                              恩，有效的，看来我刚才还是没弄明白配置，谢了啊

                            • t恤 发表于Nov 9, 2012 at 10:31

                              less2css插件折腾我几天了，
                              我是用扩展管理器安装的 没效果
                              后又用git cloneless.js-windows到本地目录。然后把目录地址加入到环境变量PATH的中，如D:\open\less.js-windows：
                              安装成功了
                              依然没有效果，后按照楼上的 在配置里设绝对路径 还是没效果，网上更没有相关解决办法，是还有什么地方要设置的吗

                              回复
                              • Fdream 发表于Nov 10, 2012 at 15:42

                                你打开命令行，输入lessc能看到上文中说的提示么？

                                回复
                                • t恤 发表于Nov 10, 2012 at 16:12

                                  有的，
                                  看了介绍说是装了less2css插件 ，在保存的时候 会自动生成同文件名的css
                                  在家和公司电脑都装了 但没有效果，不知道是哪里的问题。

                                  回复
                                • t恤 发表于Nov 10, 2012 at 15:55

                                  有的，
                                  看了介绍说是装了less2css插件 ，在保存的时候 会自动生成同文件名的css
                                  在家和公司电脑都装了 但没有效果，不知道是哪里的问题。
                                  非常感谢你回复我

                                  回复
                                  • Fdream 发表于Nov 10, 2012 at 16:20

                                    用Ctrl+`打开控制台看看，保存less文件，然后把日志发出来看看。

                                    回复
                                    • t恤 发表于Nov 10, 2012 at 16:43

                                      2012-11-10 17:27:01 or after
                                      Writing file http://www.qianduan.netDhttp://www.qianduan.netlesshttp://www.qianduan.netless.less with encoding UTF-8
                                      Traceback (most recent call last):
                                      File “.\sublime_plugin.py”, line 351, in run_
                                      return self.run(edit)
                                      File “.\less2css.py”, line 37, in run
                                      AttributeError: ‘module’ object has no attribute ‘Compiler’

                                      回复
                                      • Fdream 发表于Nov 10, 2012 at 17:19

                                        看起来像插件少了个python文件或者这个文件有问题：compiler.py，菜单 Packages->Browser Packages … 打开里面的Less2Css文件夹看看这个文件和这个是不是一样：http:http://www.qianduan.nethttp://www.qianduan.netwww.qianduan.nethttp://www.qianduan.nethttps:http://www.qianduan.nethttp://www.qianduan.netgithub.comhttp://www.qianduan.nettimdouglashttp://www.qianduan.netsublime-less2csshttp://www.qianduan.netblobhttp://www.qianduan.netmasterhttp://www.qianduan.netcompiler.py，方便的话加我QQ看看304四三九656

                                        回复
                                        • t恤 发表于Nov 12, 2012 at 09:28

                                          我下的软件有问题，重新下了一个装上去就好了，谢谢

                                        • Gallop90s 发表于Nov 16, 2012 at 00:23

                                          最近也在用Sublime Text2，很不错

                                          回复
                                        • Test 发表于Mar 6, 2013 at 12:51

                                          Traceback (most recent call last):
                                          File “.http://www.qianduan.netsublime_plugin.py”, line 362, in run_
                                          File “.http://www.qianduan.netless2css.py”, line 38, in run
                                          File “.http://www.qianduan.netlesscompiler.py”, line 33, in convertOne
                                          File “.http://www.qianduan.netlesscompiler.py”, line 78, in convertLess2Css
                                          UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xe6 in position 29: ordinal not in range(128)

                                          mac 求解

                                          回复
                                        • Test 发表于Mar 6, 2013 at 12:53

                                          Traceback (most recent call last):
                                          File “.http://www.qianduan.netsublime_plugin.py”, line 362, in run_
                                          File “.http://www.qianduan.netless2css.py”, line 38, in run
                                          File “.http://www.qianduan.netlesscompiler.py”, line 33, in convertOne
                                          File “.http://www.qianduan.netlesscompiler.py”, line 78, in convertLess2Css
                                          UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xe6 in position 29: ordinal not in range(128)

                                          Mac 系统，求解

                                          回复
                                          • Test 发表于Mar 6, 2013 at 15:38

                                            这个问题解决了，但“variable @baseLineHeight is undefined”，@base…不是全局的变量么？

                                            回复
                                            • Test 发表于Mar 6, 2013 at 15:49

                                              混乱了，自己新建的还是报上面那个问题

                                              回复
                                            • test1 发表于Aug 4, 2013 at 00:21

                                              为什么我输入lessc 会报错啊 node应用程序正常初始化0xc0000005失败

                                              回复

                                              发表评论