scss变量无法运行时修改，仅在编译阶段被替换为固定值；真正支持运行时动态修改的是css自定义属性（--xxx），scss仅用于结构化生成var(--xxx)语句并配合js控制其值。
SCSS 变量根本不能被浏览器动态修改——它在构建时就没了，不是“改不了”，而是“没得改”。真正能运行时响应的，只有 CSS 自定义属性（--xxx），SCSS 只能帮你更安全、更结构化地生成它们。
SCSS 变量编译后就彻底消失
你写的 $color: #409eff 在 Webpack/Vite 编译阶段就被替换成 color: #409eff，最终 CSS 文件里连一个 $ 字符都不会留下。浏览器解析样式时，只看到纯 CSS，完全不知道 SCSS 是什么。
- 试图用
document.querySelector('.btn').style.color = 'red'改$color？无效，因为 DOM 里压根没这个变量 - 在 DevTools 的 Styles 面板里搜
$color？搜不到，它不是 CSS 属性，也不是 JS 变量 - 哪怕你在 SCSS 里写
color: $color，编译后就是固定值，和写死color: #409eff没区别
要在 JS 中修改，必须用 --xxx + var()
动态主题、夜间模式、尺寸切换等交互，依赖的是标准 CSS 自定义属性。SCSS 的作用，是帮你把重复的 var(--color) 写得更省力、更不易出错。
- 在
:root或目标元素上设置：document.documentElement.style.setProperty('--primary-color', '#ff6b6b') - SCSS 中提前声明别名：
$primary: var(--primary-color); .btn { color: $primary; }—— 编译后就是.btn { color: var(--primary-color); } - 必须加降级值：
color: #409eff; color: var(--primary-color);，否则 IE11 或旧版 Safari 会失效 - 不要在
@if、lighten()、calc()外层套var()，Sass 编译器不认，直接报错
:export 是唯一安全的“SCSS → JS”共享方式
如果你需要在 JS 里读取 SCSS 里定义的主题色、断点宽度等静态常量，:export 是唯一可靠方案。它不是运行时通信，而是构建时导出字符串。
- SCSS 文件中写：
:export { primaryColor: $primary-color; spacingSm: $spacing-sm; } - JS 中导入：
import theme from './variables.scss'; console.log(theme.primaryColor); // "#409eff" - 注意：导出的是计算后的结果（比如
darken($color, 10%)导出的是"#357abf"），不是表达式本身 - 不能导出函数调用、map、list 等复杂类型，只支持字符串、数字、布尔值
常见混淆点：为什么 $color: var(--color) 看似可行却危险
这种写法能通过编译，但只是把字符串 "var(--color)" 当作值传下去。一旦你后续想在 mix($color, white, 20%) 或 calc(#{$color} * 2) 里复用，就会立刻失败。
- 正确做法：所有需要 JS 动态控制的值，直接写在 CSS 声明里，如
background-color: var(--bg-color, #fff) - 如果要用在
calc()，确保自定义属性本身是带单位的数值：--gap: 8px;，然后写margin: calc(var(--gap) * 2) - 避免在 SCSS 函数参数里传
var(--x)，Sass 需要编译期确定值，而var()是运行时才解析的
最易忽略的一点：很多人把所有设计令牌（颜色、圆角、阴影）一股脑塞进 :root，导致首屏 CSSOM 过大、渲染阻塞。按需注入（比如只在 .dark 类下定义暗色变量）比全局堆砌更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
