SCSS变量在构建阶段即被替换为固定值，运行时完全不可见、不可修改；真正支持JS动态控制的只有CSS自定义属性（--xxx），SCSS仅用于安全生成var(--xxx)语句并提供降级值。
SCSS变量在构建阶段就被替换成固定值，浏览器运行时根本见不到$color或$spacing——它不是变量，只是编译器的占位符。
SCSS变量编译后就彻底消失
你写的$primary: #409eff，经过sass或sass-loader处理后，输出的CSS里只有color: #409eff。DevTools 的 Styles 面板里搜$primary，结果一定是空的。
-
document.querySelector('.btn').style.color = 'red'改的是内联样式，和$primary毫无关系 -
getComputedStyle(el).getPropertyValue('$primary')会报语法错误——浏览器不认$开头的标识符 - 哪怕你在
@if $theme == 'dark'里写了逻辑，它也只在编译时跑一次，不会响应用户点击
试图用var(--x)“桥接”SCSS变量会出问题
写$color: var(--color)看似能绕过限制，但这是危险操作：Sass 编译器只把它当字符串，后续无法参与darken()、calc()或@if判断。
-
background: darken($color, 10%)→ 报错，因为darken()需要编译期确定的颜色值 -
width: calc($w / 2)→ 失败，$w如果是var(--w)，Sass 就不认识这个“数值” -
.icon-#{$type}漏了#{}→ 输出.icon-$type，浏览器静默忽略
真正能被JS动态修改的只有CSS自定义属性
运行时主题切换、夜间模式、尺寸调节这些能力，唯一依赖的是标准 CSS 自定义属性（--primary-color），不是 SCSS 变量。SCSS 的作用，是帮你安全生成color: var(--primary-color)这类语句，并加降级值：color: #409eff; color: var(--primary-color);
- JS 修改方式：
document.documentElement.style.setProperty('--primary-color', '#ff6b6b') - SCSS 中声明别名：
$primary: var(--primary-color); .btn { color: $primary; } - 必须注意兼容性：IE11、旧版 Safari 不支持
var()，降级值不能省
最常被忽略的一点：你以为在 SCSS 里写了@each $theme in (light, dark)就能自动响应系统偏好，其实它只生成两套静态 CSS；prefers-color-scheme生效的前提，是你用[data-theme="dark"]或:root:has(.dark)这类选择器去控制--xxx的值，而不是靠 SCSS 变量本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
