该用$variable而非--custom-property时：主题色、断点、z-index等静态常量需编译期确定；--custom-property仅适用于js控制、深色模式切换、动画插值等运行时动态场景，因前者编译后固化，后者支持浏览器原生读写与重绘。
什么时候该用 $variable 而不是 --custom-property
Sass 变量（$variable）在编译时就被替换成具体值，适合主题色、断点、z-index 这类静态常量；CSS 变量（--custom-property）在运行时才解析，适合 JS 控制、深色模式切换、动画插值等动态场景。
常见错误是把所有颜色都写成 --text-color，结果发现 @media (min-width: calc(var(--gap) * 2)) 直接报错——CSS 变量不能参与 Sass 的数学运算，而 $gap: 16px 就能直接用 @media (min-width: $gap * 2)。
-
$breakpoint-md: 768px→ 用于@media (min-width: $breakpoint-md) -
--theme-bg: #fff→ 用于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 的声明：
.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%)），必须包裹在#{}中才能求值 -
#{}是字符串插值，只在属性值等上下文中有效，不能用于属性名或选择器
为什么 :root 声明不等于 Sass 的变量提升
:root 里定义变量 ≠ 全局“提升”，它只是 CSS 继承链的起点，依赖运行时层叠与继承，不支持编译期替换、条件判断或跨 Shadow DOM 自动传递。
Sass 变量在编译时被文本替换，$color: red 会直接展开成 color: red；而 :root { --color: red } 是运行时解析的自定义属性，它不能用于 @import、@media 条件判断或选择器逻辑中（例如 div[style*="--primary"] 无效）。
-
:root是唯一可靠的“全局”作用域起点，但它不冒泡到外的或 JS 作用域 - 声明顺序不影响覆盖——同级
:root块内后声明的变量会覆盖先声明的，但跨文件时取决于 CSS 加载顺序和 specificity - 真正需要编译期复用时，还是得靠
$variable；:root只负责运行时分发
复杂点在于：你得时刻分清哪段逻辑发生在构建时（Sass），哪段发生在浏览器里（CSS 变量 + JS）。混淆这两者，就会写出 @if (prefers-color-scheme: dark) 这种根本无法编译的代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
