什么是 CSS 预处理器和后处理器？

CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件。

预处理器例如：LESS、Sass、Stylus，用来预编译 Sass 或 less，增强了 CSS 代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的 UI 组件模块化开发能力，极大的提高工作效率。

CSS 后处理器是对 CSS 进行处理，并最终生成 CSS 的处理工具。

后处理器例如：PostCSS，通常被视为在完成的样式表中根据 CSS 规范处理 CSS，让其更有效；目前最常做的是给 CSS 属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

补充：

  • 预处理器主要解决"复用与结构"问题：变量、嵌套、mixin、函数、循环等，让源码更易维护。
  • 后处理器主要解决"兼容性与未来语法"问题：Autoprefixer（自动加前缀）、postcss-preset-env（把未来 CSS 语法降级到当前可用的语法）、cssnano（压缩）等。
  • 现代 CSS 工程一般组合：Sass/Less（开发期） → PostCSS（加工期，自动加前缀、CSS 降级、压缩） → 浏览器。