postcss详解以及常用方法

postcss


postcss 一种对css编译的工具，类似babel对js的处理，常见的功能如：

1 . 使用下一代css语法（将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills）

2 . 自动补全浏览器前缀

3 . 自动把px代为转换成rem

4 . css 代码压缩等等

postcss 只是一个工具，本身不会对css一顿操作，它通过插件实现功能，autoprefixer 就是其一。

与 less sass 的区别
less sass 是预处理器，用来支持扩充css语法。预处理指的是通过特殊的规则，将非 css 文本格式最终生成 css 文件，而 postcss 则是对 CSS 进行处理，最终生成CSS。

postcss 既不是 预处理器也不是 后处理器，其功能比较广泛，而且重要的一点是，postcss可以和less/sass结合使用

常用的postcss插件
1 . Autoprefixer

前缀补全，全自动的。

// Autoprefixer 处理前的CSS样式
.container {
    display: flex;
}
.item {
    flex: 1;
}

// Autoprefixer 处理后的CSS样式
.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.item {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

通过使用 Autoprefixer 插件，帮助我们自动处理浏览器前缀，极大的提高了编码效率。其实，Autoprefixer 正是 postcss 众多插件中的一款，postcss 提供的简洁明了API，并且文档十分详细，这为其生态建设提供了有力的支撑。

安装：

cnpm install autoprefixer --save-dev

2 . postcss-cssnext

使用下个版本的css语法【关于语法另一篇文章会单独讲】

安装：

cnpm install postcss-cssnext --save-dev

3 . postcss-pxtorem

把px转换成rem

参考文章
【1】https://www.jianshu.com/p/9a9048bc78
【2】https://www.jianshu.com/p/183af77a51ec
【3】postcss官方文档 https://postcss.org/api/#postcss
【4】postcss在线开发 https://astexplorer.net/#/2uBU1BLuJ1