SCSS变量是编译期静态占位符，构建后即消失；CSS变量（--xxx）是运行时动态属性，保留在DOM中供JS操作和继承，二者生命周期分离、无法互相读取。
SCSS变量和CSS变量根本不在同一个生命周期
SCSS变量在构建时就编译成静态值，编译完就彻底消失；CSS变量（--color-primary）则只在浏览器运行时存在。你写$color: #2196F3，它在生成的CSS里已经变成color: #2196F3；而--color-primary: #2196F3这行还在CSS里，但$color早已不存在。二者不能互相读取——不是“访问不了”，是压根没交集。
为什么var(--color-primary)不能传给darken()这类函数
SCSS的darken()、scale-color()、@each等全部运行在编译期，只能处理已知的、确定的值。而var(--color-primary)对Sass来说只是个字符串字面量，不是颜色值，更不是数字，调用darken(var(--color-primary), 10%)会直接报错或输出无效CSS。
- 错误示例：
border-color: darken(var(--color-primary), 10%);→ 编译失败或生成border-color: darken(var(--color-primary), 10%)（浏览器不识别） - 正确路径：先用SCSS变量定义源值，再插值导出为CSS变量，运行时用
var()读取 - 若需编译期变色，必须基于SCSS变量：比如
$primary: #2196F3;，然后border-color: darken($primary, 10%);
如何把SCSS变量安全注入CSS变量
必须用插值语法#{$variable}，否则Sass不会展开变量，而是原样输出字符串，浏览器直接丢弃该声明。
- 错误写法：
--color-primary: $primary;→ 输出--color-primary: $primary;（非法CSS） - 正确写法：
--color-primary: #{$primary};→ 输出--color-primary: #2196F3; - 带函数计算也得包住：
--color-light: #{lighten($primary, 10%)}; - 如果变量来自
@use模块，不能直接#{module.$primary}，得在模块内部完成插值，或用as *解构后引用
容易被忽略的加载顺序和作用域断点
DevTools里看到:root下有--color-primary，不代表组件能拿到它。关键看Computed面板中目标属性的最终值来源：
- 如果显示
rgb(33, 150, 243)，说明样式里根本没用var(--color-primary)，而是硬编码了 - 如果显示
initial或继承值，大概率是作用域断裂——比如组件用了Shadow DOM，但没写::host { --color-primary: inherit; } - 如果Styles面板里该变量灰掉或带删除线，检查是否拼错名、缺单位（如
--size: 12没写px）、或嵌套了var(--x, var(--y))导致循环引用
真正卡点往往不在语法，而在变量定义位置是否早于使用位置、是否被第三方CSS（如Element Plus的dist/index.css）提前覆盖、以及additionalData注入是否带分号并重启了服务。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
