必须手动删改三类内容：@import语句需补全路径和扩展名；url值须加引号；多选择器逗号分隔需确保逗号保留，否则工具易致编译失败、嵌套失控或变量污染。
直接迁移 CSS 到 SCSS 几乎不需要重写，但盲目用工具“一键转换”反而容易埋下编译错误、嵌套失控或变量污染的坑。真正快的方式是：先手动清理结构，再用工具辅助转换，最后人工校验关键语法点。
哪些 CSS 内容必须手动删改，否则工具必翻车
几乎所有在线或 CLI 工具（如 css2sass、sass-convert）都按标准 CSS 解析器逻辑工作，对预处理器语义无感知。以下三类内容不提前处理，转换后大概率编译失败：
-
@import语句：原始 CSS 中的@import "reset.css"会被原样保留，而 SCSS 要求路径带引号且扩展名明确——必须改为@import "reset";（假设文件是_reset.scss） - URL 值未加引号：如
background: url(images/logo.png)→ SCSS 编译器会报错，必须手动补成background: url("images/logo.png") - 多选择器逗号分隔：如
.btn:hover, .btn:focus，部分工具会错误转成&:hover &:focus（缺逗号），正确应为&:hover, &:focus
用 sass CLI 快速验证转换结果是否可编译
别依赖工具界面反馈，本地跑一次编译最可靠。安装 Dart Sass 后，在终端执行：
sass --no-source-map --style=expanded input.css output.scss
注意这不是“转换命令”，而是试探性编译——如果报错，说明转换结果含非法语法；若静默生成 output.scss，再打开检查嵌套层级和变量引用是否合理。常见陷阱：
- 工具把
div p span这类长选择器直接套成三层嵌套，实际应拆成独立模块，而非div { p { span { ... } } } - 颜色值如
#333不会自动变成变量，得靠人工识别重复值后提取到_variables.scss - 注释
/* IE hack */可能被误解析为块级注释，建议提前替换为// IE hack
为什么推荐从 @use + 模块化结构起步，而不是直接塞进一个 style.scss
SCSS 的模块系统不是锦上添花，而是避免样式冲突的核心机制。用 @import（已废弃）或全量拼接会导致变量覆盖、@mixin 重复定义、调试时无法定位来源。真实项目中，应立刻建立如下结构：
-
_variables.scss：只放$color-primary、$spacing-md等设计令牌，不带任何样式规则 -
_mixins.scss：定义@mixin flex-center这类复用逻辑，开头加@use "variables" as *;显式依赖 - 组件文件如
_button.scss：顶部写@use "variables"; @use "mixins";，内部用variables.$color-primary引用 -
main.scss入口：只写@use "variables"; @use "components/button";，不写任何样式
这样做的好处是：换主题只需改 _variables.scss，加新组件只需新增 _xxx.scss 并在入口 @use，不会牵一发而动全身。
嵌套深度与选择器爆炸：最容易被忽略的性能雷区
SCSS 允许嵌套，不代表应该嵌套。编译后生成的 CSS 选择器层级越深，浏览器匹配成本越高，尤其在移动端。你写的 .card { .header { h1 { color: $color-text; } } } 会变成 .card .header h1，比 .card-header-title 多出两层 DOM 查询。实践中要守住两条线：
- 视觉上嵌套超过 3 层（如
.page .section .content .item .text）就该拆成独立 BEM 类名 - 避免对通用元素嵌套：
ul { li { a { ... } } }是反模式，应改用.nav-link这类语义类 - 伪类必须用
&：写&:hover而非:hover，否则会丢失父选择器上下文
真正的“快速迁移”不在于省掉多少行代码，而在于第一版 SCSS 是否具备可维护的骨架——变量集中、模块隔离、嵌套克制。后面加功能才不会反复推倒重来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
