应优先用$color处理编译期确定的静态值（如断点、z-index），用--color支持运行时动态控制（如js修改、主题切换）；前者参与sass运算，后者被浏览器原生读写并触发重绘。
什么时候该用 $color 而不是 --color
编译期确定、不随用户交互或状态变化的值，就该用 $color；运行时要被 JS 读写、响应主题切换或动画驱动的，必须用 --color。
常见误用：把断点写成 --breakpoint-md，结果在 @media (min-width: var(--breakpoint-md)) 里报错——CSS 变量不能进媒体查询条件，Sass 才支持 @media (min-width: $breakpoint-md)。
-
$z-index-modal: 1000合理：层级不会 runtime 改变，且需参与$z-index-modal + 1这类运算 -
--text-color合理：深色模式下 JS 执行document.documentElement.style.setProperty('--text-color', '#e0e0e0')立刻生效 - 把
$spacing暴露给组件 props 传入样式对象？不行——它早已编译成固定像素值，:style="{ '--padding': $spacing }"里的$spacing是死值
document.documentElement.style.setProperty('--x', 'y') 有效，但 setProperty('$x', 'y') 报错
浏览器只认 --xxx 这种合法 CSS 属性名；$xxx 是 Sass 编译器内部符号，输出的 CSS 文件里根本不存在这个字符串。
执行 document.documentElement.style.setProperty('$primary', '#ff6b6b') 会直接抛出 InvalidPropertyError，控制台一眼就能看到。
- 查当前值：用
getComputedStyle(document.body).getPropertyValue('--bg')，不是getPropertyValue('$bg') - Vue/React 中动态绑定样式：
:style="{ '--bg': theme.bg }"有效；若theme.bg底层是$bg，那它永远是编译那一刻的快照 - 想在 DevTools 里搜
$primary？搜不到——它不在 DOM、不在 computed style、也不在 network 面板返回的 CSS 里
calc(var(--gap) * 2) 可行，但 var(--gap) * 2 直接失效
CSS 变量本质是字符串，浏览器不做隐式类型转换；所有数学运算必须包裹在 calc() 里。Sass 变量则天然支持算术、颜色函数、条件逻辑。
- 正确：
width: calc(var(--spacing) * 2); - 错误：
width: var(--spacing) * 2;→ 整条声明被浏览器忽略 - Sass 中可写
$size-lg: $size-md * 1.5或lighten($primary, 10%)，CSS 变量没对应能力，只能预设好--primary-light - 媒体查询中不能用
calc()做条件判断，所以响应式断点、容器查询阈值这类必须用 Sass 变量
@use 和 @import 对 $variable 作用域的影响
@import 是全局合并，@use 默认启用模块化作用域——这是避免变量冲突的关键。
比如两个文件都定义了 $border-radius: 4px，用 @import 导入时，后加载的会覆盖前一个，bug 很难追踪；而 @use 'colors' as c 后，必须写 c.$primary 才能访问，命名空间清晰。
- 旧项目兼容
@import？确保它出现在所有@use之后，否则 Sass 会报错 - 顶层声明同名变量：
@use 'vars'; $color: red;会触发"$color is already declared" - CSS 变量没这问题：
.card { --spacing: 16px; }只影响该节点及其后代，天然按层叠规则隔离
真正容易被忽略的是：二者根本不在同一层工作。Sass 变量活在构建阶段，CSS 变量活在浏览器渲染树里。混用时别指望它们互通——JS 改不了 $，Sass 也读不到 --。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
