老项目重写CSS第一步是按功能拆分文件而非直接引入Sass特性；需提取重置规则、变量、组件样式为独立文件，保留旧类名兼容性，并严格遵循@use命名空间和嵌套层级限制。
老项目重写CSS时，先别动样式，先拆文件结构
直接在原 main.css 里塞 @use 或改变量名，90%会炸——旧样式和新 Sass 模块混编，$color-primary 被覆盖、@mixin reset-block 找不到、甚至编译不报错但按钮变透明。真正该第一步做的，是把现有 CSS 按功能切开：_reset.scss、_variables.scss、_button.scss，每个文件只做一件事。
- 用正则批量提取全局颜色/间距值，转成
$spacing-md: 16、$color-brand: #3a8ee6，不要带单位 - 把所有
div, p, ul { margin: 0; padding: 0 }这类通配重置，剪出来单独存为base/_reset.scss，后续用@import（不是@use）引入——因为 reset 是纯 CSS 规则，@use对它无效 - 已有类名如
.btn不要删，新建components/_button.scss重写它的样式，保留旧名，新需求加.btn--secondary
@use 后变量报错“undefined”，其实是命名空间没加
@use "variables" 之后直接写 color: $color-primary 肯定报错——Sass 要求显式带命名空间，variables.$color-primary 才对。这不是啰嗦，是隔离的代价。
- 所有
@use必须带别名：@use "variables" as var，然后统一用var.$color-primary - 基础模块（颜色、断点、z-index）必须收口到一个
_core.scss，里面用@forward "variables" as var-*;统一转发，上层只@use "core" as core - 别在
@mixin内部或@if块里写@use，Sass 会直接拒绝编译
嵌套超过 3 层就该抽离，不是为了“规范”而是为了可维护
.page .header .nav .item a:hover 这种选择器，Sass 编译后还是长选择器，权重爆炸、调试困难、复用率为零。嵌套不是炫技，是表达父子关系的辅助手段。
- 嵌套层级严格控制在 3 层内，例如
.card { &__header { &--large { ... } } }可以，再深就拆成独立选择器 - 禁止用标签名嵌套：
article { h2 { ... } }—— 标签语义可能变，类名才稳定 - 用
&时注意空格：&.is-active是加类，&-active是生成新类名，写错一个字符就漏样式
局部重置别用 * { margin: 0 }，用 all: unset + inherit 组合
弹窗内容区、富文本渲染容器这类需要剥离默认样式的场景，硬写 * { margin: 0; padding: 0 } 会干掉 <ul></ul> 的缩进、<button></button> 的边框，反而要补一堆 hack。
立即学习“前端免费学习笔记（深入）”；
- 写
.modal-content * { all: unset; }彻底清空，再对关键元素显式设值：.modal-content p { margin: 1em 0; } - 需要保留浏览器默认行为时（比如表单控件），换用
all: revert，它会回退到 UA 样式表，比手动列属性靠谱 - 别在全局
body上用all: unset，它会抹掉所有继承链，font-family都得重写
重写不是追求“全 Sass 化”，而是让每行代码都清楚地回答三个问题：谁在用它、为什么这么写、改了会影响谁。变量命名冲突、嵌套失控、重置误伤——这些问题不会因为用了 @use 就自动消失，它们藏在你第一次删掉 /<em> old reset below </em>/ 注释的时候。
