sass变量在运行时不存在，js无法读取或修改；必须通过sass初始化css变量（如--primary-color: #{$primary-color}），再由js操作css变量实现动态更新。
Sass 变量在运行时根本不存在，JavaScript 拿不到、改不了、也触发不了样式更新 —— 这不是限制，而是设计使然。
为什么 $color 在 JS 里查不到、设不上
Sass 是构建期预处理器，所有以 $ 开头的变量（如 $primary-color）在 Webpack/Vite 编译时就被替换成具体值（比如 #4285f4），最终输出的 CSS 文件里完全不包含 $primary-color 这个符号。浏览器解析 CSS 时，只看到硬编码的属性值，没有变量名可读取。
- 执行
getComputedStyle(document.documentElement).getPropertyValue('$primary-color')→ 返回空字符串 - 调用
document.documentElement.style.setProperty('$primary-color', 'red')→ 无任何效果，该属性名不合法 - 试图在 Vue/React 的
style绑定中写:style="{ '--color': dynamicColor }"却用 Sass 变量定义主题色 → 页面颜色始终不变
如何让 Sass 变量“看起来能被 JS 修改”
核心思路：用 Sass 变量初始化 CSS 自定义属性，再由 JS 操作后者。Sass 负责“一次赋值”，CSS 变量负责“持续响应”。
- 在
:root中用插值语法导出 Sass 值：:root {<br> --primary-color: #{$primary-color};<br> --spacing-md: #{$spacing-md};<br>} - 确保该块不在
<style scoped></style>内（否则属性选择器会破坏:root匹配） - JS 修改时只操作 CSS 变量：
document.documentElement.style.setProperty('--primary-color', '#ff6b6b') - 所有用
var(--primary-color)的地方自动重绘，无需刷新、无需切换 CSS 文件
为什么不能在 Sass 函数里读 var(--base-font-size)
因为 var() 是运行时机制，而 Sass 函数只在构建阶段执行。此时 DOM 尚未生成，--base-font-size 还没被 JS 设置，甚至浏览器进程都还没启动。
- 以下写法非法且编译失败：
@function pxToRem($px) {<br> $base: var(--base-font-size);<br> @return $px / $base + rem;<br>} - 正确做法是放弃 Sass 计算，改用纯 CSS：
font-size: calc(1rem * (16 / var(--base-font-size))) - 或直接让根元素
font-size动态绑定：html { font-size: calc(var(--base-font-size, 16px) * 1px) }，后续所有rem自动响应
容易忽略的关键边界：作用域与同步成本
把 Sass 变量映射到 CSS 变量不是“一劳永逸”，它引入了双源事实风险：一旦 $primary-color 在 Sass 中改了，但忘了同步更新 --primary-color 的赋值语句，样式就会错乱且难以排查。
- 推荐将所有映射集中在一个文件（如
_css-vars.scss），避免散落在多个@import链中 - 不要在组件级
<style></style>中重复定义:root { --x: #{$y} }，这会导致覆盖冲突 - CSS 变量天然继承，但 Sass 变量不继承——别指望子组件能“拿到父组件的 $spacing-sm”
- 如果项目已重度依赖 Sass 主题（如 Ant Design 的
_variables.scss），换肤应优先走 CSS 变量注入，而非重写整套 Sass 构建流程
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
