预处理器与 CSS Modules
CSS 原生缺少变量、嵌套与函数，项目大了就难维护：全局类名互相覆盖、重复的颜色值满地都是。预处理器（Sass/Less）补上了这些能力：$变量、嵌套、mixin 复用，编译时转成普通 CSS。
CSS Modules 则解决“命名冲突”：构建时把每个类名编译成带哈希的唯一名字（.btn → .btn_3aF2k），天然局部作用域，不存在全局污染。
- Sass/Less：变量、嵌套、mixin，编译期增强（文件后缀 .scss/.less）
- CSS Modules：类名自动加哈希，样式天然局部， import 进组件使用
- 两者可结合：.module.scss 同时享受变量与局部作用域
样式
/* button.module.scss —— 局部样式 + Sass 语法 */ $primary: #a371f7; /* 变量 */ .btn { /* 编译后变成 .btn_xH7k2 */ padding: 8px 16px; border-radius: 6px; background: $primary; &:hover { opacity: 0.85; } /* 嵌套，等价于 .btn:hover */ &.disabled { opacity: 0.4; } } // 使用：组件里按名引入 // import style from './button.module.scss'; // <button class={style.btn + ' ' + style.disabled}>按钮</button> // console.log(style.btn); // 输出 "btn_xH7k2"，哈希就是隔离手段
本节要点预处理器补能力（变量/嵌套），CSS Modules 补隔离（哈希类名）；.module.scss 两者兼得。
