CSS变量支持运行时动态修改，如通过setProperty()切换深色模式、响应用户偏好或动画状态，而SCSS变量仅在编译期生效，无法被JS读写；二者应分层使用：SCSS管设计系统骨架，CSS变量管运行时主题血肉。
运行时需要动态改？必须用 --var
深色模式切换、用户主题偏好、组件状态动画（比如 loading 按钮的透明度渐变）、A/B 测试配色——这些都依赖 JS 读写或媒体查询响应，--primary-color 能直接被 document.documentElement.style.setProperty() 修改，后代元素立刻重绘；而 $primary-color 编译完就没了，JS 对它完全不可见。常见错误是 Vue/React 里写 :style="{ '--bg': themeBg }"，但 themeBg 实际来自 SCSS 文件里的 $bg，结果绑的是编译时的静态值，状态变了样式纹丝不动。
要算单位、调颜色、做条件分支？只能靠 $var
CSS 变量本质是字符串，浏览器不解析数值含义：width: var(--gap) * 2 整条声明会被忽略；必须写成 width: calc(var(--gap) * 2)，且单位还得一致（--gap: 16px 和 --base: 16 不能混用）。而 SCSS 变量是真变量：$gap: 12px; width: $gap * 2; 直接输出 width: 24px；lighten($primary, 10%)、@if $is-mobile { ... }、@each $size in $breakpoints { ... } 全部原生支持。你没法用 CSS 变量生成按钮变体集，也没法让一个 @mixin rem-width($px) 自动把像素转成 rem——这些逻辑必须在编译期完成。
变量作用域和工程协作怎么管？@use 是底线
SCSS 变量靠文件和 @use 控制作用域：$spacing-xs 定义在 _button.scss 里，其他文件不显式 @use 'base/variables' as * 就报 Undefined variable；跨文件变量冲突靠命名空间隔离（如 color.$primary）。CSS 变量靠层叠规则：全局写 :root { --color: red; }，局部覆盖写 .card { --color: blue; }，子元素自动继承。但注意：<style scoped></style> 里写 :root 会被 Vue 加上属性选择器（如 :root[data-v-xxx]），破坏匹配，变量失效。大型项目（>3人、>200组件）必须用 @use，@import 已是工程隐患——它无依赖审计、同步阻塞、变量隐式提升，容易导致构建不可控。
要不要同时用？可以，但别混职责
典型分层：SCSS 管设计系统“骨架”——基础间距单位 $spacing-unit: 8px、断点映射 $breakpoints: ('md': 768px)、颜色明度函数 darken($primary, 15%)；CSS 变量管“血肉”——当前主题色 --primary-color、运行时字号 --font-size、深色模式开关 --is-dark: 1。错误做法是把 $primary 直接塞进 :root { --primary: #{$primary}; } 当中，这等于把编译期值固化进运行时变量，失去动态能力。正确路径是 SCSS 输出初始值（如 :root { --primary-color: #3498db; }），再由 JS 或媒体查询接管后续变更。
立即学习“前端免费学习笔记（深入）”；
真正卡住人的地方不在语法，而在生命周期意识：CSS 变量一旦注入 DOM 就活在浏览器里，能被任何脚本篡改；SCSS 变量只活在构建流水线里，打包完就蒸发。没想清“这个值谁来改、什么时候改、改了谁感知”，选哪个都会踩坑。
