scss变量在浏览器中根本不存在，仅编译期生效并被替换为固定值；真正支持运行时修改的是css自定义属性（--xxx），需通过js操作style.setproperty()并配合var(--xxx)语法实现动态样式。
SCSS变量在浏览器里根本不存在，运行时修改纯属徒劳
SCSS变量只活在编译阶段，编译完就彻底消失
你写的 $color-primary: #409eff 在 Webpack/Vite 构建时就被替换成 color: #409eff，最终 CSS 文件里一个 $ 字符都不会留下。浏览器解析样式时，只看到纯 CSS 规则，完全不知道 SCSS 是什么。DevTools 的 Styles 面板里搜 $color-primary 肯定为空——它不是 CSS 属性，也不是 JS 变量，更不是 DOM 中的可读值。
常见错误现象：
-
document.querySelector('.btn').style.color = 'red'改的只是内联样式，和$color-primary没半点关系 -
getComputedStyle(el).getPropertyValue('$color-primary')直接报语法错误，浏览器根本不认$开头的标识符
真正能被 JS 动态修改的只有 CSS 自定义属性（--xxx）
CSS 变量才是浏览器运行时真正“认”的变量。它们存在于 DOM 树中，支持 style.setProperty()、getComputedStyle()、继承、作用域覆盖，还能响应系统偏好变化。
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
正确做法是让 SCSS 生成依赖 var(--xxx) 的语句，而不是幻想“改 SCSS 变量就能变样式”：
- 在
:root或特定类下定义：--primary-color: #409eff - SCSS 中写：
color: var(--primary-color, #409eff)（带降级值） - JS 控制：
document.documentElement.style.setProperty('--primary-color', '#ff6b6b')
注意：不要写 $c: var(--primary-color); color: $c —— Sass 会把它当字符串处理，后续无法用于 lighten() 或 calc()。
试图桥接 SCSS 和运行时的典型翻车点
很多人想用 SCSS “兜底”或“增强” CSS 变量，结果掉进时间维度错配的坑：
-
$primary: var(--primary-color)看似可行，但darken($primary, 10%)必然报错——var()对 Sass 来说是普通字符串，不是颜色值 -
.btn-#{$size}不是响应式，只是编译期字符串拼接；$size变了也不会重渲染，和 Vue 响应式无关 -
:export是唯一合法的构建时导出通道，用于把$spacing-sm这类静态常量传给 JS，但它不提供任何运行时通信能力
为什么你改了 JS 却看不到样式变化？
最常被忽略的一点：CSS 变量必须在使用前定义，且作用域要覆盖目标元素。如果 :root { --bg-color: #fff; } 写在某个组件 CSS 文件末尾，而 .card { background: var(--bg-color); } 定义在前面，那该规则里的 var() 就取不到值（回退为 unset）。另外，路径加载失败、拼写不一致（如 --alllports vs --allports）、缺少降级值、旧版 Safari 兼容性问题，都可能让 var() 表面生效实则静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
