Postcss 详解

一、简介

postcss 是一个利用JS插件来对CSS进行转换的工具，这些插件非常强大，强大到无所不能，具有以下功能：

• 拥有极高的处理性能（3倍以上的处理速度）
• 既可以写正常的CSS，也可以结合 LESS 或者 SASS 一起编写
• 对 Source Map 支持更好

二、postcss 的一些不错的插件

• autoprefixer是一个后处理程序，适用于普通的 CSS，可以实现 css3 代码自动补全，也可以轻松跟 Sass，LESS 及 Stylus 集成，在 CSS 编译前或编译后运行。
• postcss-cssnext (内置autoprefixer) 允许你使用未来的css语法，如css4（可以理解为css中的Babel）
• postcss-sprites 自动制作雪碧图，不用手动拼接啦
• cssnano 压缩css代码(如果你是用webpack的话，css-loader集成了cssnano，你不需要再次引入)
• postcss-hash-classname 把转换后的css文件名附上哈希值
• pixrem 将rem转换为px
• postcss-px-to-viewport 将px转换为vh和vw（推荐作为移动端的计量单位，而不是rem）
• postcss-pxtorem 将px转换为rem

三、postcss.config.js的作用和配置

postcss.config.js 为 postcss 插件的配置文件。

const autoprefixer = require('autoprefixer')
module.exports = {
  plugins: [
    autoprefixer()
  ]
}

上文配置中，就引入了 autoprefixer 插件。