@import因无作用域文本拼接导致静默覆盖、调试失焦和重复编译；@use强制命名空间访问杜绝污染，@forward实现安全接口封装。
因为 @import 本质是无作用域的文本拼接，它会让变量、@mixin、函数在编译期直接塞进全局，导致静默覆盖、调试失焦、重复编译——这不是“过时”，而是机制缺陷已无法支撑中大型项目。
为什么 @import 会静默覆盖变量却从不报错
@import 不做作用域隔离，只做文件内容复制粘贴。后导入的同名变量无条件覆盖前面的，Sass 编译器既不校验重名，也不记录来源。
- 常见错误现象：
$spacing在_vars.scss里是8px，在_theme.scss里又被写成12px；@import 'vars'; @import 'theme';后，所有地方的$spacing都变成12px，但 DevTools 只显示最后定义的位置 - 使用场景：Angular 项目里同时引入 UI 库（如 Angular Material）和自定义
_mixins.scss，双方都定义了$elevation-2，结果组件阴影值被意外替换 - 根本原因：Chrome 的 CSS 源码映射（source map）只指向最终生效的那行，你查不到是谁先定义、谁后覆盖
@use 怎么强制你意识到变量来自哪里
@use 默认创建私有作用域，所有成员必须通过命名空间显式访问，没有“默认注入”这回事。
- 基础写法：
@use "src/styles/variables" as v;→ 必须写v.$primary-color，不能直接用$primary-color - 路径规则：
@use "variables"默认命名空间是variables（自动去掉下划线和扩展名），_utils.index.scss则变成utils_index - 容易踩的坑：
@use "mixins" as *;是非法语法（Dart Sass 5.0+ 明确禁止），别试图用它模拟@import行为 - 性能影响：同一模块被 10 个文件
@use，Sass 内部只解析一次；而@import会解析 10 次，热更新变慢
@forward 不是“高级 @import”，而是接口封装层
@forward 不执行代码，只声明“我这个文件对外提供什么”，适合做统一入口（比如 _index.scss），把底层能力安全透传出去。
立即学习“前端免费学习笔记（深入）”；
- 典型结构：
_index.scss里写@forward 'colors'; @forward 'typography' with ($font-size-base: 1rem);，下游@use 'index' as t;就能用t.$color-brand和已覆盖的t.$font-size-base - 可控暴露：
@forward 'mixins' hide responsive-hover;→ 调用方写mixins.responsive-hover会直接报错 - 重命名转发：
@forward 'utils' as u-*;把所有成员加u-前缀，避免和业务层$radius冲突 - 严禁循环：
A @forward B，同时B @forward A→ 编译报Circular @forward
真正难的不是语法替换，而是要把过去“靠顺序和记忆维护”的变量关系，改成“靠命名空间和显式依赖约束”的模块契约——漏改一个 $color-text 引用，就会立刻报 Undefined variable，这不是 bug，是系统在帮你揪出隐藏多年的技术债。
