请解释CSS预处理器和后处理器分别指什么，并说明在项目中引入它们的理由。

回答思路

1. 【回答框架 1】CSS预处理器是在编写阶段扩展CSS语法的工具，如Sass、Less、Stylus，提供变量、嵌套、混合、函数等特性，编译后生成标准CSS，提升代码复用性和可维护性。
2. 【回答框架 2】CSS后处理器是在CSS生成后进一步处理的工具，典型如PostCSS及其插件，可自动添加浏览器前缀、压缩代码、转换现代语法，增强兼容性和性能。
3. 【回答框架 3】使用预处理器的主要原因：减少重复代码、支持逻辑和模块化、便于主题定制；使用后处理器的主要原因：自动化兼容性处理、优化输出、统一构建流程。
4. 【回答框架 4】两者可结合使用，预处理器负责开发体验，后处理器负责生产优化，共同构成现代CSS工程化基础。
5. 【回答框架 5】选择时需考虑团队熟悉度、构建工具集成和项目复杂度，避免过度依赖导致调试困难。
6. 【关键点 1】预处理器扩展CSS语法，后处理器优化已生成的CSS。
7. 【关键点 2】预处理器提升开发效率，后处理器保证兼容性和性能。
8. 【关键点 3】两者可协同工作，分别作用于开发和生产阶段。
9. 【易错点 1】混淆预处理器和后处理器的职责，导致工具链配置错误。
10. 【易错点 2】忽视后处理器的插件依赖，可能引入额外构建风险。
11. 【易错点 3】过度使用预处理器特性，增加编译复杂度和维护成本。