sublime3插件：autoprefixer自动添加兼容前缀

想必大家都知道sublime吧，之前在看display:flex注意到这个插件，它的作用就是自动补全兼容前缀。此插件依赖node，所以在安装之前请确保Node.js已经安装，检查方法：打开终端，输入node -v。在这里只讨论node已经安装的前提。

打开sublime，同时按”ctrl+shift+p”，选择”install package” ，接着选择autoprefixer，此插件基本安装好了。

设置快捷键，选择菜单Preferences > Key Bindings – User

[
    { "keys": ["ctrl+alt+shift+p"], "command":"autoprefixer" }
]

快捷键可以根据自己的喜好来设置，注意按键冲突，当然也可以不设置。在不设置的情况下，按下”ctrl+shift+p”，选择autoprefixerCSS即可。

设置需兼容的浏览器。默认是没有兼容IE/opera的-ms/-o，选择菜单：Preferences > Package Settings > Autoprefixer > Settings - User

例子1：为浏览最新版本添加前缀，市场份额大于%，美国份额>5%，ie8和ie7

{
    "browsers": ["last 1 version", "> 10%", "> 5% in US", "ie 8", "ie 7"]
}

当使用此例子写法的时候，有可能在自动补全的时候不生效，其实它不是不生效，是当前你写的就已经兼容所有的了（last 1 version），笔者当时就纳闷了好长时间，怎么改动不生效。

例子2：

{
    "browsers": ["last 2 versions","Firefox >= 20"]
}

.a{ display:flex; }输出:

.a{ display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; }