CSS后处理器是干啥的？就像给样式表装了个智能助手

你写完一段 CSS，发现要反复加 -webkit- 前缀适配老版手机浏览器；又想用变量存个主色，但原生 CSS 在 IE 里不认；再一看，嵌套写法明明更直观，却得一层层手敲选择器……这些事儿，CSS 后处理器就帮你悄悄搞定了。

它不是编译器，也不是预处理器

别被“处理器”仨字唬住——它不生成新语言，也不强制你学一套新语法。像 PostCSS 这样的工具，本质是个插件平台：你装上什么插件，它就帮你做什么事。写的是标准 CSS，改的也是标准 CSS，只是中间多了一道“润色”工序。

常见活儿，它真干得利索

比如自动加浏览器前缀：
你只写：

button { display: flex; transition: all 0.3s; }

经过 autoprefixer 插件处理后，自动变成：

button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

再也不用手动查 Can I Use，也不用猜该加几个前缀。

再比如用 postcss-custom-properties 支持 CSS 变量降级：
你写：

:root { --main-color: #4a90e2; } .header { color: var(--main-color); }

它能帮你转成兼容老浏览器的写法：

:root { --main-color: #4a90e2; } .header { color: #4a90e2; }

生活里也能打个比方

就像你手写了份菜谱（原始 CSS），但家里老人看不太懂“小火慢炖”这种说法，你拿手机拍下来，发给一个懂行的朋友（后处理器），他帮你把每句都翻译成“煤气灶旋钮拧到最小档，计时 25 分钟”（带前缀、变量展开、嵌套扁平化……），再打印出来——菜谱还是那个菜谱，只是更靠谱、更好用了。

它不替代你写 CSS，也不替你做设计决策，只是默默站在你身后，把重复、易错、繁琐的体力活接过去。你专注布局和效果，它负责让这些效果稳稳跑在各种设备上。