document.documentelement.style.setproperty('--bg', '#121212')有效，因--bg是cssom原生支持的自定义属性，可读写并触发重绘；$bg是sass编译期占位符，输出后不存在，js无法操作。
根本不是一回事——--color能被 JavaScript 实时改、浏览器立刻重绘；$color编译完就没了，JS 对它做任何事都等于对空气说话。
为什么 document.documentElement.style.setProperty('--bg', '#121212') 有效，但 setProperty('$bg', 'red') 报错
--bg 是浏览器原生支持的 CSS 自定义属性，真实存在于 CSSOM 中，getComputedStyle() 能读、setProperty() 能写、改完下一帧就重绘。$bg 只是 Sass 编译器内部的文本占位符，输出的 CSS 文件里根本不存在这个符号，浏览器连识别都不会识别，自然报 InvalidPropertyError。
- 你在控制台执行
document.documentElement.style.setProperty('$primary-color', 'red')，浏览器直接拒绝——这不是配置问题，是语法非法 - Vue 组件里写
:style="{ '--bg': themeBg }"却底层用$bg定义主题色 → 值永远卡在编译那一刻，状态变了颜色也不动 -
getComputedStyle(document.body).getPropertyValue('--text')能拿到值，getPropertyValue('$text')永远返回空字符串
var(--gap) * 2 报错，但 calc(var(--gap) * 2) 可行
CSS 自定义属性存的只是字符串，浏览器不解析其数值含义；所有数学运算必须显式包裹在 calc() 里。而 $gap 是 Sass 预处理器层面的“真变量”，支持类型识别和直接运算。
- ✅ 合法：
width: calc(var(--spacing) * 2); - ❌ 无效（整条声明被忽略）：
width: var(--spacing) * 2; - Sass 中可写
$size-lg: $size-md * 1.5或lighten($c, 10%)，CSS 变量没有对应能力，只能提前算好存成--spacing-lg、--primary-light等衍生变量
:root { --x: y } 在 <style scoped></style> 里失效
:root 是全局选择器，scoped 会自动添加属性选择器（如 [data-v-xxx]），导致 :root[data-v-xxx] 根本不匹配，变量无法注入文档根节点。
- 正确做法：全局变量统一放在非
scoped的样式块中，比如项目根目录的main.css或index.html的<style></style> - JS 修改必须走
document.documentElement.style.setProperty()，别用document.body——否则后代元素可能拿不到继承值 - 局部覆盖直接在选择器内重定义：
.card { --shadow: 0 4px 12px rgba(0,0,0,0.15); }，子元素自动继承
真正容易被忽略的是混合场景：比如在 Sass 文件里用 @include button-theme($color) 生成一堆硬编码样式，同时又试图用 JS 改 --button-bg——两者互不感知，改了也白改。分工得清楚：$color 负责编译期逻辑和计算，--color 负责运行时状态响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
