在 Sass 中应使用 _config.scss 配合 @use 管理全局变量，变量需语义化命名、加 !default，并通过 @use "config" with (...) 实现项目级覆盖；导出 CSS 自定义属性须用 #{} 插值，且二者职责分离。
如何在 Sass 中用 _config.scss 管理全局 CSS 变量
直接用 _config.scss 定义变量并 @use 导入，是最稳妥的全局配置方式。别用 @import，它已废弃，且会破坏模块作用域。
-
@use保证变量只在明确导入的文件中生效，避免命名冲突 - 所有全局变量（颜色、间距、断点）应集中写在
_config.scss，不分散在组件里 - 变量名用
$color-primary这类语义化命名，别用$blue-500—— 后者耦合具体值，换主题时全得重改 - 必须加
!default：比如$spacing-md: 1rem !default;，方便下游项目覆盖而不报错
为什么 @use + with 比单纯 @use 更适合项目配置
硬编码的 _config.scss 不够灵活，尤其当多个子项目共用同一套 Sass 库时，每个项目可能需要微调基础值。这时要用 @use "config" with (...) 覆盖默认值。
- 只在入口文件（如
main.scss）中用一次@use "config" with，其他地方一律@use "config" - 被覆盖的变量必须在
_config.scss中声明为!default，否则with无效 - 不能在
with中传函数或复杂表达式，只支持字面量和已定义变量：✅$color-primary: #3b82f6，❌$radius-base: calc(#{$spacing-xs} * 2) - 注意：Sass 1.23+ 才完整支持
with，旧版本会报错Invalid CSS after "with": expected "{", was "("
:root 中导出 CSS 自定义属性时，为什么不能直接用 $variables
Sass 变量编译后就消失了，:root 里写的 --color-primary: $color-primary 会原样输出，浏览器不认识 $color-primary。
- 必须用
#{$color-primary}插值语法：例如--color-primary: #{ $color-primary }; - 插值只对字符串、数字、颜色等基本类型安全；如果变量是
null或 map，会抛错Invalid null value for `#{}` - 导出到
:root的变量应严格限于真正需要 JS 动态读取或主题切换的项（如主题色、字体大小），别一股脑全导出 —— 体积涨、维护难、还可能被误读 - 若需响应式 CSS 变量（如不同断点下
--spacing-sm值不同），得配合@media手动重设，Sass 本身不生成媒体查询逻辑
常见错误：Undefined variable 和循环依赖怎么快速定位
报错 Undefined variable "$color-primary" 通常不是变量没定义，而是加载顺序或作用域问题。
- 检查是否在
@use "config"前就用了$color-primary—— Sass 不允许前向引用 - 确认
_config.scss文件名带下划线，且路径正确：@use "@/styles/config"和@use "@/styles/_config"效果不同（后者会报错） - 如果
_config.scss里@use了别的模块（比如tools/functions），而那个模块又反过来@use "config"，就会循环依赖，Sass 报Circular dependency - VS Code 用户可装 “Sass Indented” 插件，它能高亮未解析的变量；命令行编译时加
--trace参数可看到完整加载链
实际项目里最易被忽略的是：CSS 自定义属性和 Sass 变量不该承担同一职责。前者面向运行时动态控制，后者面向构建时静态复用。混着用，后期想抽离主题或做 SSR 支持时，会卡在变量“该在哪一层定义”的问题上反复返工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
