1、在sublime里安装好less(less语法高亮功能插件)和Less2Css(编译功能插件)这两个插件,具体步骤为:
Ctrl+Shift+p打开命令面板,输入install package并在下拉里选中install package(这里必须已经安装好了管理插件的package control插件),弹出新搜索框之后再输入要安装的插件,然后下拉出现对应插件,点击安装。


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

postcss less文件打包css less文件怎么编译成css_postcss less文件打包css


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 如下图

postcss less文件打包css less文件怎么编译成css_环境变量_02

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

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

打开默认设置:

postcss less文件打包css less文件怎么编译成css_环境变量_03


把"minify":true 的true 改成 false 记得保存一下 就OK啦再编译一遍来看看效果:

postcss less文件打包css less文件怎么编译成css_环境变量_04

ok 搞定!