Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。详情见,https://github.com/postcss/autoprefixer

这里说明一下autoprefixer和compass关系,首先他们都能浏览器前缀自动补全,区别在于一个是为css编译,一个是为sass编译。在应用上:如果是手机端,那直接用sass和autoprefixer;如果是pc端,pc段考虑老版本的浏览其比较多,用compass比较多。

当Autoprefixer添加前缀到你的CSS,还不会忘记修复语法差异。这种方式,CSS是基于最新W3C规范产生:

a {
background : linear-gradient(to top, black, white);
display : flex
}
::placeholder {
color : #ccc
}
编译成: a {
background : -webkit-linear-gradient(bottom, black, white);
background : linear-gradient(to top, black, white);
display : -webkit-box;
display : -webkit-flex;
display : -moz-box;
display : -ms-flexbox;
display : flex
}
:-ms-input-placeholder {
color : #ccc
}
::-moz-placeholder {
color : #ccc
}
::-webkit-input-placeholder {
color : #ccc
}
::placeholder {
color : #ccc
}

  Autoprefixer 同样会清理过期的前缀,因此下面的代码:

 

a {
-webkit-border-radius : 5px;
border-radius : 5px
}

编译成:

a {
border-radius : 5px
}

  

因为经过Autoprefixer处理,CSS将仅包含实际的浏览器前缀。

安装node.js

(略)

安装Autoprefixer,

见https://github.com/postcss/autoprefixer:
npm install autoprefixer -g

安装postcss-cli(如果网速不好,会安装错误,我安装两次,可以安装npm的淘宝镜像)

Autoprefixer其实是postcss的插件,见https://github.com/code42day/postcss-cli
npm install postcss-cli -g

配置外部工具

1.打开HBuilder,运行-外部工具-外部工具配置
新建一个外部工具配置
名称填写autoprefixer(这个随意,就是起个名字)
要执行的命令或文件填写npm安装目录\postcss.cmd(mac下应为npm安装目录\postcss)如
C:\Users\wu\AppData\Roaming\npm\postcss.cmd
工作目录填写${project_loc}
参数填写-u autoprefixer -o ${resource_loc} ${resource_loc}

2.sublime就比较简单

ctrl+shift+p(前提是安装了install packages),搜索autoprefix css

搜到了点击安装,选中当前的css的文件

hbuilder和sublime的autoprefixer安装或者里sass的$mixin处理浏览器前缀-LMLPHP

在ctrl+shift+p,输入autoprefix css,会有一短暂的卡顿后生成如下图:

hbuilder和sublime的autoprefixer安装或者里sass的$mixin处理浏览器前缀-LMLPHP

使用autoprefixer
点击你的css、sass文件,然后右键,依次点击外部工具-autoprefixer(此处为你新建外部工具的名称)等待编译,编译完毕即可

3.利用sass的@mixin
http://codecloud.net/16133.html

05-11 09:36
查看更多