SCSS变量必须用#{$var}插值才能转为CSS变量，直接写--color: $color无效；因SCSS变量属编译期，CSS变量属运行时，二者生命周期分离，插值是唯一注入方式。
SCSS变量怎么转成CSS变量（:root里用）
直接写 $color: #3498db; 然后在 :root 里写 --primary-color: $color; 是无效的——Sass 不会自动把 SCSS 变量注入 CSS 自定义属性。必须用插值语法 #{$color}。
$primary-color: #3498db;:root { --primary-color: #{$primary-color}; }- 如果变量是 map 或嵌套结构，得配合
map-get()：比如--bg: #{map-get($theme, bg)}; - 注意：插值只在编译期生效，不能动态更新；生成的 CSS 变量是静态值
@use加载的SCSS变量无法在CSS变量中直接引用
用 @use '_variables' 后，$primary-color 不再是全局变量，而是 variables.$primary-color。但 :root 块里不能直接调用带命名空间的变量——插值不支持点号访问。
- 错误写法：
@use '_variables'; :root { --c: #{variables.$primary-color}; }→ 编译报错 - 正确做法：在
_variables.scss内部就完成插值，或导出为局部变量再引用 - 推荐方案：把
:root规则也写进_variables.scss，让它随模块一起编译生效 - 别名写法也不行：
@use '_variables' as v;后#{v.$x}依然非法
JS怎么拿到Sass里定义的颜色值
Sass 变量本身 JS 完全不可见，只有编译后落地的 CSS 变量才能被 getComputedStyle 读取。想让 JS “知道” Sass 里的 $accent 是什么，唯一可靠路径是：Sass 生成 --accent，JS 读 --accent。
- 不要依赖
:export+sass-loader：它只对纯 CSS 文件有效，.scss中的:export会被忽略 - 不要试图在 JS 里 import SCSS 文件获取变量：Webpack 的
sass-loader默认不解析:export，即使配置了也仅限于 CSS Modules 场景，且值全为字符串 - 真正能跑通的链路：
_theme.scss定义$accent: #e74c3c;→ 插值写入:root { --accent: #{$accent}; }→ JS 调用getComputedStyle(document.documentElement).getPropertyValue('--accent') - 主题切换时，JS 改
document.documentElement.dataset.theme，靠 Sass 预生成的:root[data-theme="dark"]规则响应
多主题下SCSS变量和CSS变量怎么协同
核心矛盾在于：SCSS 变量是编译期静态值，CSS 变量是运行时可变状态。两者不能“双向绑定”，只能单向映射——用 SCSS 生成多套 CSS 变量，再由 CSS 和 JS 共同消费。
- 用
$themesmap 统一存配置，避免散落的$light-primary/$dark-primary - 用
@each批量生成:root[data-theme="xxx"]，每个主题对应一组--color值 - 组件样式必须写
color: var(--text-color);，不能回退到color: $text-color;，否则主题切换无效 - 新增主题只需往 map 里加一项，不用改任何样式逻辑——这是唯一能 scale 的方式
最容易被忽略的是：Sass 模块系统不传递副作用。某个 SCSS 文件没 @use '_variables'，它就不会带上 :root 里定义的 CSS 变量——这和旧版 @import 全局注入完全不同，得手动确保所有需要主题能力的文件都引入了变量模块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
