Sass变量与CSS变量不能互通，只能通过#{$var}单向导出；因二者分属编译期与运行时，直接写--color: $color会被静默丢弃，插值是唯一可靠方式。
不能互通，只能单向导出。 Sass 变量（$color-primary）在编译期就消失了，浏览器运行时根本看不到它；原生 CSS 变量（--color-primary）是字符串，Sass 编译器也读不到。所谓“互通”其实是误解，实际只有一条可靠路径：用 #{$var} 把 Sass 值注入到 CSS 自定义属性声明中。
为什么直接写 --color: $color 会失效
这不是语法错误，而是 Sass 解析器根本不会处理这种写法——它不认识 $color 在 CSS 属性值里的位置，整条声明会被静默丢弃。DevTools 里搜不到 --color，不是浏览器不认，是压根没生成。
-
--primary: $primary;→ 输出为空或非法 CSS，浏览器忽略 -
--primary: # { $primary };→ 多了个空格，插值失效，输出字面量# $primary -
color: var(--text, $fallback);→$fallback不会被替换，Sass 报错或编译为无效值
正确导出必须用 #{$var} 插值
这是唯一能将 Sass 编译期值“塞进”CSS 原生语法的方式，本质是字符串拼接，不做任何运行时逻辑。
-
$primary: #3b82f6;定义后，必须写成--primary: #{$primary}; - 支持表达式：
--line-height: #{1.5 * 1};（注意：这是 Sass 计算，不是calc()） - 颜色、数字、字符串类型安全；若变量是
null或未定义，插值结果为空，CSS 无效 - 嵌套 map 需配合
map-get()：--bg: #{map-get($theme, bg)};
@use 模块下变量怎么引用并导出
用 @use 加载的变量默认不进入全局作用域，不能直接写 #{$primary}。
立即学习“前端免费学习笔记（深入）”；
- 错误：
@use 'vars'; :root { --c: #{vars.$primary}; }→ 编译报错，插值不支持点号访问 - 正确做法一：在
_vars.scss内部完成插值和:root声明 - 正确做法二：导出局部变量再引用，例如
$primary: vars.$primary;后再#{$primary} - 别名写法同样受限：
@use 'vars' as v;后#{v.$x}依然非法
最容易被忽略的是：Sass 模块的 :root 规则只在被 @use 的文件中生效。某个组件 SCSS 文件没引入变量模块，它就不会带上这些 CSS 变量——这和旧版 @import 的全局注入行为完全不同。
