不能直接迁移，必须重写逻辑：sass变量是编译时静态值，css变量是运行时可变引用，二者语义、生命周期和作用域均不同；硬替换$primary为var(--primary-color)会导致计算失效、作用域错乱和条件逻辑丢失，正确做法是抽离$themes map、批量生成主题css变量、组件样式统一用var()引用，并严格对齐键名与作用域。
不能直接“迁移”，必须重写逻辑：Sass变量是编译时静态值，CSS变量是运行时可变引用，二者语义不同、生命周期不同、使用位置也不同。硬把 $primary 替换成 --primary-color 并不等于迁移，而是制造隐患。
为什么不能用替换工具一键迁移
常见错误是用正则或转换脚本把所有 $primary 替成 var(--primary-color)，结果样式崩掉或主题失效。原因有三：
-
$primary在 Sass 中可参与计算（比如lighten($primary, 10%)），而var(--primary-color)是字符串，无法被lighten()解析 - Sass 变量作用域是文件/块级，CSS 变量作用域是 DOM 树，
:root下定义 ≠ 组件内自动可用 - 原 Sass 文件里可能有
@if $theme == 'dark'这类条件分支，CSS 变量没有运行时逻辑能力，必须提前编译出对应规则
正确迁移的三步动作
迁移本质是重构主题系统，不是文本替换。关键动作如下：
- 把原 Sass 配置抽成
$themesmap，例如：$themes: (light: (primary: #007bff, bg: #fff), dark: (primary: #4dabf7, bg: #1a1a1a)) - 用
@each+map-get()批量生成各主题的:root[data-theme="xxx"]块，每个块内只设--x，不写具体样式 - 所有组件样式中，删掉所有
$xxx直接引用，统一改用var(--x)；颜色计算类逻辑（如 hover 色）改用color-mix()或 CSS 函数，而非 Sass 函数
最容易漏掉的兼容细节
迁移后跑得通，不代表主题能切换。以下几点常被跳过：
- 组件里写的
var(--primary-color)，其 key 名必须和$themesmap 里的键名完全一致（包括大小写、连字符），比如 map 里是primary-color，就不能在 CSS 里写var(--primaryColor) -
:root下不能直接写--primary-color: #007bff作为 fallback，否则深色模式下 JS 切 theme 时会因 specificity 不够被覆盖；正确做法是只在:root[data-theme="light"]和:root[data-theme="dark"]里设值 - 如果旧项目用了
@import拼接变量文件，新方案必须改用@use，否则命名空间冲突会导致variables.$primary引用失败
真正卡住人的从来不是语法转换，而是编译时逻辑和运行时控制权的重新划分——Sass 管“怎么算”，CSS 变量管“用哪个值”，中间那条线划偏了，后续所有主题切换都会掉帧、错色、难调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
