因为$primary-color在编译后即被替换为固定值（如#007bff），不进入浏览器运行时环境，JS无法访问或修改；只有CSS自定义属性（如--primary-color）可在运行时通过JS动态更新并实时重绘。
不能用 Sass 变量实现运行时主题切换，必须靠 CSS 自定义属性（--primary-color）配合 JS 控制；Sass 的唯一作用是安全、结构化地生成这些 CSS 变量的初始值和多主题规则。
为什么 $primary-color 无法在浏览器里被 JS 修改
Sass 变量在编译阶段就被替换成具体值（如 #007bff），最终 CSS 文件里根本不存在 $primary-color 这个字符串。你执行 document.documentElement.style.setProperty('$primary-color', 'red') 会静默失败——因为这个属性名压根没进样式系统。
常见错误现象包括：
- 写了
@if $theme == 'dark'，结果编译后只保留了暗色规则，亮色部分直接消失 - 用
vue-cli-plugin-style-resources-loader注入 Sass 变量，以为点击按钮就能触发重编译——它只在启动时跑一次 - JS 修改了某个状态，但页面颜色完全没反应，因为所有样式都基于硬编码值，而非
var(--primary-color)
正确协同方式：Sass 负责生成，CSS 变量负责传递
Sass 不参与运行逻辑，只做三件事：组织主题配置、生成 :root 和 [data-theme] 规则、确保所有引用都走 var()。示例结构如下：
$theme-colors: (
"primary": #007bff,
"success": #28a745,
"warning": #ffc107
);
:root {
@each $name, $color in $theme-colors {
--color-#{$name}: #{$color};
}
}
[data-theme="dark"] {
--color-primary: #4dabf7;
--color-success: #4caf50;
--color-warning: #ff9800;
}
关键点：
- 所有组件样式必须写成
color: var(--color-primary);，禁用color: $primary-color; - 不推荐用独立变量（如
$primary-light、$primary-dark），它们无法遍历、易不同步 - 如果要用 Sass 函数计算派生色（比如
lighten($primary, 10%)），必须在 Sass 层完成计算后，再赋值给 CSS 变量，而不是留到运行时
data-theme 切换比类名切换更干净
用 data-theme="dark" 而非 class="dark"，能避免类名污染、优先级冲突，也更语义化。JS 控制只需一行：
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
初始化时读取并设置：
const saved = localStorage.getItem('theme');
if (saved) {
document.documentElement.setAttribute('data-theme', saved);
}
注意：
-
:root必须定义默认值作为兜底，否则未匹配主题时样式会失效 - 不要在
:root.dark这种写法里覆盖变量——CSS 中没有.dark类作用于:root，应统一用[data-theme="dark"] - 动画过渡需显式声明，比如
transition: background-color 0.3s ease;，CSS 变量本身不触发过渡
最易被忽略的一点：所有 Sass 编译出的 CSS 必须确保不混用硬编码值与 var() 引用。哪怕只有一处写成 background: #007bff;，主题切换就会在那里断裂。一致性不是可选项，是强制前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
