sublime text下安装插件autoprefixer

  有时候在写css样式的时候,分不清哪些属性需要前缀,哪些不需要,总是爱搞混淆了,于是autoprefixer这款插件便应运而生了。虽然在使用webpack的时候,我们可以很方便的使用这个,但是,如果项目比较小,或者是单纯的写几个页面,不想用webpack的时候,我们就可以在sublime text这款编辑器下安装autoprefixer这款插件了(前提是你的编辑器是sublime text)。

  (1)、安装:

  打开sublime text编辑器,Ctrl + shift + p,选择Install package,然后输入autoprefixer,即可开始安装。

  

  (2)、安装完后,并不能立即使用,还得配置一下快捷键,选择Preferences =》 Key Bindings,添加如下代码:

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

  

  (3)、选择Preferences => Package Settings => Autoprefixer,在文件右侧添加如下代码,如我的是这样的: 

{
  "browsers": ["last 20 versions", "> 5%", "Firefox >= 10", "ie 6-11"],
  "cascade": true,
  "remove": true
}

  其中last 20 versions表示浏览器最近的20个版本(这个数据可随意更改), 5%表示市场份额大于5%(百分比可随意),Firefox >= 10表示火狐浏览器版本大于或等于10

  好了,现在可以愉快地敲代码了。比如:

   .box { display: flex; } 

扫描二维码关注公众号,回复: 1594576 查看本文章

  选中上面这行代码,然后Ctrl + shift + alt + p,神奇的一幕发生了。代码变成这样了: 

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

猜你喜欢

转载自www.cnblogs.com/jf-67/p/9182908.html