AI 摘要：本文探讨了 CSS 预处理工具（如 Sass）和后处理工具（如 PostCSS）的演变，指出随着原生 CSS 功能的增强（如变量、嵌套）以及新兴工具（如 Lightning CSS、Tailwind）的崛起，后处理工具逐渐成为主流选择。作者分析了技术趋势变化的原因，并提供了迁移建议。

1. 背景与分类
• 预处理工具（Pre-processors）：如 Sass、Less，需编译为合法 CSS。
• 后处理工具（Post-processors）：如 PostCSS、Lightning CSS，直接处理 CSS 文件并优化输出。

2. 后处理工具的优势
• Autoprefixer 曾是必备插件（自动添加浏览器前缀），现因浏览器兼容性提升需求减少。
• 关键转折点：
• 原生 CSS 支持变量和嵌套。
• Tailwind 4 放弃预处理支持。
• Lightning CSS 的高性能替代方案。

3. 原生 CSS 的进步
• 已支持变量（--var）和嵌套语法，减少对预处理器的依赖。
• 未来将引入 if() 函数，但模块化拆分仍需依赖工具（如 postcss-import）。

4. Tailwind 的影响
• Tailwind 4 明确不支持预处理器，推荐自身作为“预处理器替代”。
• 仍可通过 .css 扩展名与 Sass 兼容，但流程更复杂。

5. Lightning CSS 的崛起
• 性能优势：比 PostCSS 快 100 倍，支持 Vite 集成。
• 功能覆盖：替代 postcss-import 、autoprefixer 等插件。
• 开发者如 Chris Coyier 已转向 Lightning CSS。

6. 迁移建议
• 仅需变量/嵌套 → 原生 CSS。
• 需模块化 → Lightning CSS。
• 需混合（Mixins） → Tailwind 的 @apply。
• 需复杂逻辑（if/for） → 暂保留 Sass。

CSS-Tricks

So, You Want to Give Up CSS Pre- and Post-Processors... | CSS-Tricks

There was once upon a time when native CSS lacked many essential features, leaving developers to come up with all sorts of ways to make CSS easier to write over the years.