必须用插值语法#{$var}将Sass变量注入:root生成CSS变量，因二者分属编译期与运行时；直接赋值无效，且Sass无法读取或动态响应CSS变量。
不能在Sass里“定义CSS变量”然后让Sass读取它——Sass编译完就没了，CSS变量是浏览器运行时才起作用的。真正可行的是：用Sass变量生成CSS变量，在:root里批量输出。
如何用Sass变量生成CSS变量
核心动作是把稳定的设计值（比如主题色、字号阶梯）先声明为Sass变量，再在:root中用插值语法#{...}输出为CSS变量。Sass不支持在:root里调用lighten()这类函数直接算值，必须提前算好。
- 在
_variables.scss中定义：$primary-color: #007bff;、$spacing-xs: 4px; - 在
_css-vars.scss中输出：:root { --primary-color: #{$primary-color}; --spacing-xs: #{$spacing-xs}; --primary-light: #{lighten($primary-color, 10%)}; } - 确保
_css-vars.scss被@use或@import进主文件，且位于其他样式之前（否则变量可能未定义）
为什么var(--color)在Sass里无法当参数用
Sass解析器根本不懂var()语法，它只处理编译前的静态值。你写@include theme-bg(var(--bg))会直接报错Invalid CSS after "var"，不是写法问题，是能力边界。
- 所有Mixin参数必须是Sass原生类型：颜色、数字、字符串、map等
- 如果想让Mixin适配暗色模式，应传入
$theme: "dark"或$bg-color: $color-surface-dark，而不是依赖运行时CSS变量 - 需要JS动态切换主题时，CSS变量是载体，但Sass只负责生成初始值和衍生值（如
--primary-hover）
@use后访问不到$color-primary怎么办
不是变量没定义，是模块作用域锁死了访问路径。Sass默认不自动注入变量到全局，这是保护机制，不是bug。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
@use "variables"; color: $color-primary;→ 报Undefined variable - 正确写法：
@use "variables" as v;，然后用v.$color-primary - 别用
as *偷懒，尤其当多个模块都导出$spacing时，命名冲突会悄无声息覆盖值 - 路径必须相对
main.scss，比如@use "../tokens/variables" as t;，不能省略../
最容易被忽略的是：CSS变量的层叠优先级和作用域完全独立于Sass。你在:root里输出了--text-color，但某个组件内部又写了.card { --text-color: red; }，那子元素用var(--text-color)取到的就是red——Sass对此毫无感知，调试只能靠浏览器Computed面板看最终计算值。
