今天介绍下Hbuilder中的常用的技巧。
Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。详情见,https://github.com/postcss/autoprefixer。
关于Autoprefixer
当Autoprefixer添加前缀到你的CSS,还不会忘记修复语法差异。这种方式,CSS是基于最新W3C规范产生:
编译成:
Autoprefixer 同样会清理过期的前缀,因此下面的代码:
编译成:
因为经过Autoprefixer处理,CSS将仅包含实际的浏览器前缀。
安装node.js
(略)
安装Autoprefixer,
见https://github.com/postcss/autoprefixer:
npm install autoprefixer -g
mac下可能需要加sudo,或者是不是全局安装(-g)那就看你自己的环境了。
如npm太慢,可使用 NPM 镜像的https://npm.taobao.org/
安装postcss-cli
Autoprefixer其实是postcss的插件,见https://github.com/code42day/postcss-cli
npm install postcss-cli -g
配置外部工具
打开HBuilder,运行-外部工具-外部工具配置,如图:
新建一个外部工具配置
名称填写autoprefixer(这个随意,就是起个名字)
要执行的命令或文件填写npm安装目录\postcss.cmd(mac下应为npm安装目录\postcss)如
工作目录填写$
参数填写-u autoprefixer -o $ $
然后点击应用,如下图
使用autoprefixer
点击你的css、sass文件,然后右键,依次点击外部工具-autoprefixer(此处为你新建外部工具的名称)等待编译,编译完毕即可
配置快捷键
工具-选项-常规-快捷键,搜索autoprefixer(此处为你新建外部工具的名称),设置快捷键即可
在Hbuilder中运行效果图:
运行autoprefixer之后的效果:
如果有需要的话,可以根据这个步骤安装下,在写代码的时候方便很多。
领取专属 10元无门槛券
私享最新 技术干货