该用 $variable 而不是 --custom-property 的情况是：Sass 变量适用于编译时确定的常量（如主题色、断点、z-index），CSS 变量适用于运行时动态场景（如 JS 控制、主题切换）。

什么时候该用 $variable 而不是 --custom-property

Sass 变量在编译时就替换成具体值，CSS 变量在运行时才计算。这意味着：$color-primary 适合定义主题色、断点、z-index 层级这类不会动态变化的常量；--text-color 更适合需要 JS 控制、主题切换或响应式颜色调整的场景。

常见错误是把所有变量都写成 CSS 变量，结果发现媒体查询里没法用 calc(var(--gap) * 2) —— 因为 CSS 变量不能直接参与 Sass 的数学运算。

• 用 $breakpoint-md: 768px 定义断点，配合 @media (min-width: $breakpoint-md)
• 用 --theme-bg: #fff 配合 JS 切换深色模式：document.documentElement.style.setProperty('--theme-bg', '#1a1a1a')
• 避免在 @each 循环中生成大量 --dynamic-#{$i}，这会污染 CSSOM 且难以调试

@use 和 @import 对变量作用域的影响

@import 是全局合并，所有被导入文件里的 $var 都会污染当前作用域，容易覆盖或冲突；@use 默认启用模块化作用域，变量必须显式通过命名空间访问，比如 colors.$primary。

如果你在 _buttons.scss 里写了 $border-radius: 4px，又在 _forms.scss 里也写了同名变量，用 @import 就可能被后加载的覆盖 —— 这类 bug 很难定位。

立即学习“前端免费学习笔记（深入）”；

• 优先用 @use 'sass:math' 或 @use 'styles/colors' as colors
• 若必须用 @import（如兼容旧库），确保它出现在所有 @use 之后
• 不要在 @use 后再声明同名顶层变量，Sass 会报错 "$var is already declared"

CSS 变量如何安全地 fallback 到 Sass 编译值

CSS 变量本身支持 fallback：color: var(--text-color, #333)，但这个 #333 是硬编码值，无法复用 Sass 的 $gray-700。解决方案是让 Sass 输出带 fallback 的声明：

@use 'styles/vars' as v;
.button {
background-color: var(--bg-primary, #{v.$color-primary});
border-color: var(--border-default, #{v.$color-border});
}

注意 #{v.$color-primary} 中的插值语法 —— 它把 Sass 变量值“注入”到字符串中，最终编译为 var(--bg-primary, #0066cc)。这样既保留了运行时灵活性，又没丢掉设计系统的一致性。

• 不要写 var(--x, $sass-var)，Sass 会报错：变量不能直接放在 var() 里
• 如果 $sass-var 是函数调用（如 lighten($base, 10%)），必须包裹在 #{...} 中才能求值
• fallback 值不能含空格或括号（如 rgba(...)），否则 CSS 解析失败

调试时怎么快速区分哪些值来自 Sass、哪些来自 CSS 变量

浏览器开发者工具里，CSS 变量的值会显示为 var(--x, ...)，鼠标悬停能看到当前计算值；Sass 变量则完全不可见——它早已变成普通 CSS 值。所以一旦出现样式异常，先看 computed 样式里是否还留着 var() 引用。

一个实用技巧：给 CSS 变量加统一前缀，比如 --app-color-、--app-spacing-，而 Sass 变量用 $app-color-，这样在搜索和审查时能立刻分辨来源。

• 检查元素样式时，右键“Reveal in Sidebar” → “Custom Properties”，只显示真正生效的 CSS 变量
• 如果某颜色在 computed 中显示为 rgb(0, 102, 204) 而非 var(--color-primary)，说明它已被 Sass 替换，JS 无法再修改
• 用 CSS.supports('color', 'var(--x)') 检测浏览器是否支持 CSS 变量，老版本 IE 会返回 false

Sass 变量和 CSS 变量不是替代关系，而是分层协作：Sass 管结构、逻辑、构建时一致性；CSS 变量管状态、交互、运行时可变性。混用时最易忽略的是作用域污染和 fallback 的静态化 —— 这两处出问题，样式就会在构建后“失联”。