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,添加如下代码:

1
2
3
4
5
6
[
    {
        "keys": ["ctrl+alt+shift+p"],
        "command": "autoprefixer"
    }
]

  

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

1
2
3
4
5
{
  "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; } 

 

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

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

 

posted @   江峰★  阅读(310)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
历史上的今天:
2017-06-14 编译Sass
点击右上角即可分享
微信分享提示