必须用插值语法#{$var}，因为SCSS变量属编译期、CSS变量属运行时，生命周期分离；--color: $color会原样输出无效字符串，而--color: #{$color}才正确生成静态CSS值。
不能直接赋值，必须用插值语法 #{$var} 才能把 SCSS 变量注入到 CSS 自定义属性中。
为什么 --color: $color 不生效
SCSS 变量在编译期就被替换成具体值，而 CSS 自定义属性（--xxx）是运行时才解析的原生 CSS 语法。Sass 编译器不会主动把 $color 这类变量“翻译”成自定义属性值——它只认 #{$color} 这种显式插值指令。
- 写
--primary: $primary-color;→ 编译报错或生成无效 CSS（如--primary: ;） - 写
--primary: #{$primary-color};→ 正确输出--primary: #3498db; - 若变量未定义，插值会留空，不报错但结果不可用
:root 中批量注入 SCSS 变量
通常把全局主题色、间距、字体等 SCSS 变量同步到 :root，供 JS 或后续 CSS 使用。关键点是：所有插值必须在 :root 块内显式写出，不能靠循环自动展开（Sass 的 @each 可以辅助，但仍是手动映射）。
- 基础写法：
$primary: #007bff; :root { --primary: #{$primary}; } - Map 结构需配合
map-get()：$theme: (bg: #f8f9fa, text: #212529); :root { --bg: #{map-get($theme, bg)}; --text: #{map-get($theme, text)}; } - 避免在
:root外写自定义属性，否则作用域受限（比如只对后代生效，而非全局）
插值在非 :root 选择器里的使用场景
有时需要组件级 CSS 变量（例如 .card { --card-bg: #{$card-bg}; }），这时插值依然适用，但要注意作用域和覆盖逻辑。
- 组件内插值后，
var(--card-bg)只在该组件及其子元素生效 - 若同时在
:root和组件里定义同名变量，组件内定义优先级更高 - 插值内容不能含 Sass 函数调用（如
#{lighten($color, 10%)}会报错），必须是纯值或已计算好的变量 - 字符串类变量要加引号：
$font-stack: "Helvetica, Arial, sans-serif"; --font: "#{$font-stack}";
最容易被忽略的是生命周期错位：SCSS 变量一旦编译完成就固化为 CSS 字符串，之后 JS 修改 style.setProperty() 不会影响它；反过来，JS 设置的 --color 也无法反向更新 SCSS 变量。两者单向桥接，仅靠 #{$var} 这一次编译时注入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
