该用 $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 的静态化 —— 这两处出问题，样式就会在构建后“失联”。
