CSS变量更适合运行时主题切换，因其是浏览器原生支持的运行时机制，而SCSS变量仅在编译期生效；暗黑模式切换只需JS执行setProperty，所有var()立即响应，SCSS变量则需重新构建样式包。
它不是为了“写得少”，而是为了在主题切换、多环境适配、跨团队协作时，让样式变更可控、可追溯、不漏改。
为什么var(--color-primary)比$primary-color更适合运行时主题切换
CSS 变量是浏览器原生支持的运行时机制，而 SCSS 变量只在编译期生效。这意味着：
- 暗黑模式切换只需执行
document.documentElement.style.setProperty('--color-primary', '#2563eb')，所有var(--color-primary)立即响应 - SCSS 的
$primary-color一旦编译成 CSS 就固化了，换主题必须重新构建整个样式包 - 组件库若需支持用户端动态换肤（比如设置页点选主题），只能依赖 CSS 变量；SCSS 无法介入这个流程
- 注意：
var()不支持在@media或@supports内部直接赋值，变体逻辑仍需 JS 或预处理器配合
:root和局部作用域变量的分工陷阱
全局变量不该堆在:root里一劳永逸——容易污染、难调试、冲突风险高：
-
:root只放真正跨主题/跨组件的顶层 Token，如--spacing-unit、--font-size-base - 组件级变量应定义在其根选择器下，例如
.card { --card-padding: 1rem; }，这样.card > .card-body { padding: var(--card-padding); }才不会受其他组件同名变量干扰 - 避免在
div或section这类通用容器上声明变量，会导致不可预期的继承覆盖 - 调试时用 DevTools 的 Computed 面板看
var()实际解析值，比查源码更快定位是哪一层覆盖了变量
和 SCSS 共存时，变量分层必须明确
大型 UI 库往往 SCSS + CSS 变量混用，但边界不清会引发维护灾难：
立即学习“前端免费学习笔记（深入）”；
- SCSS 负责编译期逻辑：条件生成、循环写
@keyframes、计算rem值、生成主题 CSS 文件 - CSS 变量负责运行时控制：主题开关、用户偏好、动画中间态、无障碍缩放适配
- 禁止在 SCSS 中用
#{var(--x)}拼接 CSS 变量——这会产生无效语法；需要动态值的地方，用 JS 注入或style属性 - SCSS 的
$map结构（如$theme-dark）可用来生成多套 CSS 变量规则，但最终输出仍是静态 CSS，不能替代运行时setProperty
最易被忽略的点：CSS 变量的继承性是双刃剑——它让主题透传变得简单，但也意味着任意父级style修改都可能意外覆盖子组件变量，所以组件封装时必须显式重置关键变量，而不是依赖“没设就用全局”。
