外观
Sass、Less 这类预处理器现在还需要吗？
预处理器在浏览器理解 CSS 之前，把变量、嵌套、混合宏编译成普通 CSS。变量和很多嵌套现在 CSS 自己就有。新项目优先用原生 CSS，只有设计系统或旧构建还依赖预处理器时再留着。
原理
Sass 的 .scss、Less、Stylus 都提供变量、嵌套、混合和函数。它们是构建期工具，浏览器看不到 $color 这种变量。改一个变量要重新编译。
原生自定义属性 --color 是运行时的，能跟主题、媒体查询和行内样式一起变。预处理器变量做不到「用户切换主题时不用重新请求 CSS」。
原生嵌套已经可用，选择器不要套太深。深度超过三四层，优先级和阅读成本都会上去。混合宏如果只是为了少写厂商前缀，现在用目标浏览器列表和原生属性就够了。
Sass 的模块系统（@use）比旧的 @import 清楚，能控制命名空间。维护旧代码时不要再加全局 @import。
追问
和 CSS Modules、原子类怎么分？
预处理器解决的是编写 CSS 的语法。CSS Modules 解决的是类名不冲突。原子类是另一套设计约束。三者可以同时存在，但不是必须叠在一起。
变量用哪种？
主题色、会在运行时切换的值用自定义属性。只在编译期算一次的间距刻度，预处理器变量或原生变量都可以。不要两套各写一遍还不同步。
易错点
- 把 Sass 变量当成运行时主题开关。
- 嵌套把父选择器复制很多遍，产物比手写还大。
- 新代码继续
@import预处理器文件，编译顺序和重复打包都难控。