CSS 预处理器总览
Less、SCSS、Stylus 这三类工具，都是把“更适合维护的样式语言”编译成浏览器真正认识的 CSS。
它们出现的背景也很直接。早期 CSS 在这些方面一直不太顺手：
- 变量能力弱
- 复用能力有限
- 嵌套层级不好表达
- 计算、循环、条件这类能力缺位
- 大型项目里样式拆分之后很容易散
所以预处理器更像一层“写作体验增强器”。
先记住它们在解决什么
三类预处理器最常见的能力，大致都落在这里：
- 变量
- 嵌套
- 混入（mixin）
- 函数
- 运算
- 条件 / 循环
- 模块化拆分
也就是说，它们解决的更多是“样式怎么写更顺”，而不是“浏览器兼容性怎么处理”。
兼容性这一层，更常交给 PostCSS、Autoprefixer 或构建链本身。
Less、SCSS、Stylus 的差别先看一句话版
| 工具 | 风格 | 最明显的特点 | 现在更常见的场景 |
|---|---|---|---|
| Less | 接近 CSS | 上手快，历史项目多 | 老中后台、Ant Design 生态、存量项目 |
| SCSS | 接近 CSS | 生态最强，功能最完整 | React / Vue / Vite / Webpack 主线项目 |
| Stylus | 语法最自由 | 缩进式、可省略符号 | 老 Vue 项目、历史仓库、偏个人风格项目 |
为什么现在 SCSS 讨论得更多
不是因为 Less 和 Stylus 没有能力，而是因为：
- SCSS 语法和 CSS 很接近
- Sass 生态最完整
- 文档、教程、插件、团队经验更多
- 放到现代构建工具里更顺
所以如果是新项目重新选一套预处理器，SCSS 往往会更常见。
那 Less 和 Stylus 还值不值得看
值。
原因也很简单：
- Less 仍然大量存在于老项目和一些组件库生态里
- Stylus 在一批 Vue 历史项目里仍然能看到
- 面试、维护老仓库、做技术迁移时，经常会碰到
所以这一组内容更适合这样看：
- 新项目选型：优先理解 SCSS
- 维护存量项目：Less 和 Stylus 也要能读、能改
一个更实用的判断方式
如果是新项目
通常优先考虑：
- 直接用现代 CSS
- 或者用 SCSS
如果是老项目
优先考虑的是：
- 不要为了“统一技术栈”贸然重写全部样式
- 先看现有构建链、组件库和团队习惯
- 只在必要的局部迁移
推荐阅读顺序
- 先看
SCSS：语法最常见，生态最完整 - 再看
Less：很多老项目和中后台还会碰到 - 最后看
Stylus：主要解决读老代码和理解差异
和 PostCSS 的边界
预处理器和 PostCSS 经常会被放在一起提，但它们不是一回事。
- 预处理器：解决“怎么写更顺”
- PostCSS：解决“产出的 CSS 怎么继续加工”
一个很常见的链路是：
SCSS / Less / Stylus -> CSS -> PostCSS -> 浏览器
继续看哪篇更合适
- 想看现代项目里的主流写法：先看
SCSS - 想补 Ant Design、老中后台项目经验：看
Less - 想读懂旧 Vue 项目：看
Stylus