postCSS 常用插件

发表于 | 更新于: | 分类于 |
字数统计: 519 | 阅读时长 ≈ 2

postCSS常用插件

PostCSS拥有非常多的插件，诸如自动为CSS添加浏览器前缀的插件autoprefixer、当前移动端最常用的px转rem插件px2rem，还有支持尚未成为CSS标准但特定可用的插件cssnext，还有很多很多。就连著名的Bootstrap在下一个版本Bootstrap 5也将使用PostCSS作为样式的基础。

一句话来概括PostCSS：CSS编译器能够做到的事情，它也可以做到，而且能够做得更好

PostCSS性能

在PostCSS官方推特上看到，由JavaScript编写的PostCSS比C++编写的libsass还要快3倍.

如果你对上面的性能截图有疑问，可以亲自来这里测试看看。

常用的插件

autoprefixer

首先是最火的官方插件 autoprefixer 。autoprefixer 是为我们的 css 添加前缀的插件，它的数据来源于 Can I use。目的是让我们写纯粹的 css。例：

a {
    display: flex;
}

会编译成：

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

Options

通过 autoprefixer(options) 配置：

var plugin = autoprefixer({ browsers: ['> 1%', 'IE 7'], cascade: false });
  • browsers (array): 指定你需要支持的浏览器列表。可以直接指定浏览器版本（如 IE 7）,也可以使用选项（如： last 2 version 或 > 5%）,具体选项可以查看 Browserslist
  • cascade (boolean): should Autoprefixer use Visual Cascade, if CSS is uncompressed. Default: true
  • add (boolean): 是否添加浏览器兼容前缀. 默认值是true.
  • remove (boolean): 是否去除无用的浏览器兼容前缀. 默认值是true.
  • supports (boolean): should Autoprefixer add prefixes for @supports parameters. Default is true. flexbox (boolean|string): should Autoprefixer add prefixes for flexbox properties. With “no-2009” value Autoprefixer will add prefixes only for final and IE versions of specification. Default is true.
  • grid (boolean): should Autoprefixer add IE prefixes for Grid Layout properties. Default is true.
  • stats (object): custom usage statistics for > 10% in my stats browsers query.

调试

info() 方法可用于查看调试信息.可以像下面这样查看哪些浏览器被选中以及哪些属性被添加兼容前缀：

var info = autoprefixer({ browsers: ['last 1 version'] }).info();
console.log(info);

postcss-safe-parser

postcss-safe-parser 可以帮你查找并修补CSS语法错误。

cssnano

cssnano 是模块化的CSS压缩器。

0%