关于Sublime和HBuilder的less预编译配置
前段时间朋友要用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 —》点击工具 —》安装插件 —》)
安装完成之后,你可以直接创建个less文件,鼠标右键即可编译,但每次改动都得编译,在工程中是不实用的,所以“懒”是一切创造的不竭动力,可以自动监听、编译。
cmd 下:
npm install -g less
5、配置文件名等,如图
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,就搞定啦!
哦了,终于整完了!感觉自己记在本上的没几句话,没想到整理出来这么费劲!对了,再推荐一个预编译工具,考拉——大家可以试一下
手敲的,难免有疏漏之处,望指正!