关于Sublime和HBuilder的less预编译配置

前段时间朋友要用less自动编译,自己配置了下分享给大家。

Sass/Scss/Less的区别


比较好理解的是——
                                 sass是一个总的概念,包含了scss和less。
比较官方的解释——

                             Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进。

Less也是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量,继承,运算, 函数.  Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可在服务端运行 (借助 Node.js)。

好了 书归正传,讲less配置 。

HBulider的Less自动编译配置

HBulider自带了手动编译插件

(打开HBulider —》点击工具 —》安装插件 —》关于Sublime和HBuilder的less预编译配置

安装完成之后,你可以直接创建个less文件,鼠标右键即可编译,但每次改动都得编译,在工程中是不实用的,所以“懒”是一切创造的不竭动力,可以自动监听、编译。

1保证自己的电脑已安装node.js。这是基础。
2

cmd 下: 
npm install -g less


3如图打开
关于Sublime和HBuilder的less预编译配置

4新建一个你想编译的文件的后缀。
关于Sublime和HBuilder的less预编译配置


5配置文件名等,如图

关于Sublime和HBuilder的less预编译配置


6重启HBulider就可以了,只要保存就自动编译了,灰常方便


Sublime的Less自动编译配置

步骤


1、保证自己的电脑安装node.js

2

cmd 下: 
npm install -g less

3安装less插件

ctrl+shift+p (是sublime插件的搜索)

ctrl+shift+p ->  install package  -> less  Enter安装

功能:LESS高亮插件

简介:用LESS的同学都知道,sublime没有支持less的语法高亮,所以这个插件可以帮上我们

使用:打开.less文件或者设置为less格式

4安装less2css插件

ctrl+shift+p ->  install package  -> less2css  即可安装

功能:

(1)当保存less文件的时候自动生成同名的css文件;
(2)当保存less文件的时候提示编译错误信息;
(3)批量编译项目目录下的所有less文件为css文件。

具体功能设置可以修改该插件的setting-user参数,记住是先将setting-default里的参数复制到setting-user中在修改

使用:

ctrl+s即可将编写的less文件自动编译为css文件。

5

之后在 Sublim 里面建less文件时,会有一个错误

LESS: Unable to interpret argument clean-css

这是因为还需要一个插件 
less-plugin-clean-css插件的安装

npm install less-plugin-clean-css

接着重启一下sublime,就搞定啦!

哦了,终于整完了!感觉自己记在本上的没几句话,没想到整理出来这么费劲!

对了,再推荐一个预编译工具,考拉——大家可以试一下

手敲的,难免有疏漏之处,望指正!