sublime text2/3安装autoprefixer插件及配置

文章目录

Autoprefixer是一个智能的css3自动补全插件。Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的。本文主要介绍如何将它安装在sublimeText2/3上。

针对刚开始使用sublime text的coder,下面是安装方法:

下载autoprefixer插件

https://github.com/sindresorhus/sublime-autoprefixer

打开sublime ,选择菜单 Preferences >  Browse Packages 将下载的压缩包解压到这

 

/**
*   1.使用快捷键打开command panel
*   2.选择Install Package
*   3.输入你想安装的插件,比如(Autoprefixer)
*/
“Ctrl + Shift + P”> Install Package > Autoprefixer > Installing Successful

设置快捷键:

选择菜单Preferences > Key Bindings – User

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

配置浏览器选项:

进入CSS文件,默认配置在按下快捷键(Ctrl+Shift+P)后输入Autoprefix,你会发觉它什么事也没干,原来是因为这玩意还要配置下,以下为配置方法:

Preferences>package setting>AutoPrefixer>Setting-User

添加以下代码:

{
    "browsers": ["last 7 versions"],
    "cascade": true,
    "remove": true
}

或者

{
    "browsers": ["last 2 versions","last 2 Chrome versions",">5%","Firefox >= 20","ie 6-8","iOS 7"]
}

这两个配置下来之后效果一样,随便选择一个好了。

其他设置

默认的是没有兼容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"]
}

例子2:

{
    "browsers": ["last 2 versions","Firefox >= 20"]
}
.a{
    display:flex;
}

输出

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

参考写法:

last 2 versions每一个主要浏览器的最后2个版本
last 2 Chrome versions谷歌浏览器的最后两个版本
> 5%市场占有量大于5%
> 5% in US美国市场占有量大于5%
ie 6-8ie浏览器6-8
Firefox > 20火狐版本>20
Firefox >= 20火狐版本>=20
Firefox < 20火狐<20
Firefox <= 20火狐<=20
ios 7指定IOS 7浏览器

更多请参考:https://github.com/ai/browserslist#queries

原创文章:sublime text2/3安装autoprefixer插件及配置 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/autoprefixer-sublimetext.html)
评论已关闭。