Sublime text 3如何编辑less并转(编译)成css文件 (ctrl + s 保存立即编译)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/shi851051279/article/details/81461081

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文件也会同步更新内容。


后来发现一个问题,每次编译后的代码都会自动压缩,但是种种原因我不希望编译后的文件是压缩的怎么办?接着往下看
压缩过的css 如下图这里写图片描述

这是因为在插件里,自动默认设置成把编译后的css压缩了
如果我们不想它压缩怎么办呢,很简单,修改一下less2css插件的设置就可以了
在sublimeText菜单中选择 :

中文版:首选项→插件设置→Less2Css→Settings-Default
英文版:Preferences → Package Settings → Less2Css → Settings-User

打开默认设置:
这里写图片描述
把”minify”:true 的true 改成 false 记得保存一下 就OK啦

再编译一遍来看看效果:
这里写图片描述

ok 搞定!

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页