美文网首页sublime:hello world!
关于Sublime text 3如何编辑less并转(编译)成c

关于Sublime text 3如何编辑less并转(编译)成c

作者: 没个性的七秒鱼 | 来源:发表于2016-09-28 22:34 被阅读5849次

    今天开始学习使用less这个强大方便的前端工具,本来是考虑用koala(专门编辑less的软件)来使用less的,但是发现sublime编辑器也可以实现对less的编译及高亮显示代码,这样既能少用一个软件还能扩展sublime的功能,何乐而不为,于是赶紧去网上查了资料并加以整理。

    1、在sublime里安装好less(less语法高亮功能插件)和Less2Css(编译功能插件)这两个插件,具体步骤为:

    Ctrl+Shift+p打开命令面板,输入install package并在下拉里选中install package(这里必须已经安装好了管理插件的package control插件),弹出新搜索框之后再输入要安装的插件,然后下拉出现对应插件,点击安装。

    2、安装好插件后还不能编译,必须还要安装好node.js才行

    下载传送门:Node.js,必须保证系统中已经安装了nodejs并且路径已经添加到环境变量里面,一般安装好之后就已经自动添加到系统环境变量Path里,不过最好打开确认一下,打开方法:右键计算机->属性->环境变量->在系统变量里找到Path,然后选择下面的编辑按钮,里面的变量值就是

    系统环境变量:


    3、安装less

    在cmd 下输入命令:npm install -g less,安装好之后在 Sublime 里面Ctrl+n新建less文件时,会有一个错误:LESS: Unable to interpret argument clean-css,这是因为还需要一个插件:less-plugin-clean-css插件的安装同样在cmd下输入命令:npm install less-plugin-clean-css,安装好之后问题就解决了

    使用方法:在sublime中新建一个less文件,按Ctrl+s就会根据当前文件编译为一个css文件,这个新建的文件默认放在less文件同目录下,之后每次编辑完less文件之后Ctrl+s保存,同目录下的css文件也会同步更新内容。

    好了,这样就可以开始在sublime上愉快的编辑less啦~

    相关文章

      网友评论

      • 神的指纹:Koala太臃肿了。我试过sublime装那两个插件,npm也装了,保存的时候还是报错……
        geekape:要写正确的less语法,不能乱写
      • shit不知道起什么昵称:我想问的是编译出来的css默认是压缩的,如何默认是正常显示?
        4abda5bce84d:@天很清 亲 css能正常显示了 可是缩进不是tab缩进 好难看,你有遇到这情况吗??有解决办法吗
        天很清:Preferences > Package Settings > Less2Css > Settings - User 设置:
        {
        "minify": false
        }
      • emoji2022:npm install less-plugin-clean-css ,这个我用得有点问题,于是我将其全局安装就好了
        8573db435203:全局安装了之后去编译less还是提示这个错误 咋整呢
      • flyween:@没个性的七秒鱼 题主,这里编写less生成的css的路径可以设置吗
        emoji2022:@二姑娘是个好姑娘 回复不能添加图片,我写一篇吧,http://www.jianshu.com/p/10d45d7a5687
        二姑娘是个好姑娘:@MAX_大左 我还不是很懂这个生成路径怎么改= =
        emoji2022:@睡眠不足的瞌睡虫 可以的。可以通过命令行编译: > lessc *.less > 1.css , 指定css 生成的路径及文件名。
      • 没个性的七秒鱼:各位看官觉得有用就赞一下吧~~不给赞没动力的说~~~555
        始于钟情_ccc4:@青年_青年 你的解决了么 我百度了网上很多方法都不行啊 跟你一样问题
        shit不知道起什么昵称:@没个性的七秒鱼 我想问的是编译出来的css默认是压缩的,如何默认是正常显示?
        青年_青年:@没个性的七秒鱼 题主,劳烦问一下,nodejs的环境变量怎么配置,为什么我编译less保存的时候,sublime报错 less2css error:[winError 2] 系统找不到指定文件 。

      本文标题:关于Sublime text 3如何编辑less并转(编译)成c

      本文链接:https://www.haomeiwen.com/subject/uflkyttx.html