什么是PostCSS？

2019-04-25

原理

用JS来处理CSS
每个 PostCSS 插件都是一个 NodeJS 的模块

现在有200多个插件，但还不够用

主要功能

就两个
1）把 CSS 解析成 JavaScript 可以操作的 AST；
2）调用插件 处理 AST，得到结果

可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式

常用的PostCSS插件

Autoprefixer

#content {
 display: flex;
}

变为：

#content {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

cssnext

允许开发者在当前项目中使用将来CSS版本的新特性（就像将ES6/7/8 转为 ES5）

自定义属性和变量
可以写变量
样式规则嵌套

.message {
 font-weight: normal;
 & .header {
   font-weight: bold;
 }
  @nest .body & {
   color: black;
 }
}

用cssnext转换为：

.message {
 font-weight: normal
}
 
.message .header {
 font-weight: bold;
}
 
.body .message {
 color: black;
}

模块化CSS modules

:global .title {
 font-size: 20px;
}
 
.content {
 font-weight: bold;
}

变为：

.title {
 font-size: 20px;
}
 
._content_6xmce_5 {
 font-weight: bold;
}

不能简单的把 PostCSS 归类成 CSS 预处理或后处理工具。PostCSS 所能执行的任务非常多，同时涵盖了传统意义上的预处理和后处理。

ps:
AST：抽象语法树结构（Abstract Syntax Tree）