直接迁移css到sass需分阶段重构：先重命名css为scss并确保dart sass编译通过，再人工提取高频值为变量，最后按需渐进嵌套与模块化，避免盲目批量转换。
直接迁移 CSS 到 Sass 项目不是“一键转换”，而是分阶段重构：先让现有 CSS 能被 Sass 编译器识别，再逐步引入变量、嵌套、模块等特性。盲目用工具批量转 @import 或套嵌套，反而会埋下维护隐患。
确认编译器已切换为 Dart Sass
老项目常卡在 node-sass，它已停止维护且不兼容新 Node 版本。运行 npm ls node-sass dart-sass，若输出含 node-sass 且无 dart-sass，必须先清理：
- 执行
npm uninstall node-sass（别留着当备用） - 安装
npm install sass --save-dev（Dart Sass 是官方推荐实现） - 检查
sass-loader版本是否 ≥ 12.0（Vue CLI 5+ 默认适配，旧版需升级）
验证方式：新建一个 test.scss，写 $color: red; .a { color: $color; }，用 sass test.scss 编译成功即通过。
把 .css 文件当作 .scss 直接重命名并导入
SCSS 是 CSS 的超集，所有合法 CSS 都是合法 SCSS。迁移第一阶段只需做两件事：
- 将原
style.css改名为style.scss（不改内容） - 在入口文件（如
main.scss）中用@import "style"替代原来 link 标签或 JS import
注意：@import 在 Dart Sass 中已弃用（仅兼容），但对存量迁移足够安全；真正要转向 @use 是第二阶段的事。此时编译出的 CSS 和原来完全一致，零风险。
识别重复值，手动提取第一批变量
工具不会自动把 #3498db 变成 $primary-color。你需要人工扫描高频值：
- 全局搜索
#开头的十六进制色值，出现 ≥3 次的优先提取 - 搜索
px、rem单位数值，如16px、1.5rem出现频繁，建$spacing-md、$line-height-base - 字体名、圆角值、阴影参数也按同样逻辑处理
变量统一放在 _variables.scss，开头加 !default（如 $primary-color: #3498db !default;），方便后续被主题覆盖。别贪多——首批变量控制在 10 个以内，确保每个都被至少一处真实引用。
嵌套和模块化必须按需渐进，而非全量套用
看到 .header .nav ul li a 就写成四层嵌套？这是最常见误操作。嵌套只适用于有明确父子 DOM 关系且样式强耦合的场景，比如组件内部结构：
- ✅ 合理：
.card { .card__title { margin-bottom: $spacing-sm; } } - ❌ 危险：
div { p { span { color: $text-muted; } } }（破坏可复用性，选择器权重爆炸）
模块化优先从功能切口入手：把按钮、表单、网格等独立样式抽成 _buttons.scss、_forms.scss，用 @import 按需加载。别一上来就拆 base、layout、components 三层目录——目录结构是结果，不是前提。
真正的“无痛”在于克制：每次只解决一个具体问题，比如“这个颜色改了要动 17 处”，就提一个变量；“这个按钮样式在 5 个地方复制粘贴”，就抽一个 mixin。Sass 的价值不在语法炫技，而在让修改成本可预期。那些没被业务逻辑真正驱动的抽象，迟早变成技术债。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
