@use是Sass官方强制替代@import的模块化方案，因@import已被Dart Sass 2.0+完全移除；它通过命名空间（如variables.$primary-color）避免全局污染，要求@use置于文件顶部、路径带引号且不自动补扩展名，变量访问必须加前缀。
@import 已被弃用，Sass 官方明确要求用 @use 或 @forward 替代 —— 不是“推荐”，而是编译器在 Dart Sass 2.0+ 中已完全移除对旧 @import 的支持。直接用 @import 会报错：Invalid CSS after "@import": expected 1 selector or at-rule, was "@use "variables"。
为什么 @use 是默认首选
@use 加载变量、函数、混入时会自动创建命名空间（namespace），避免全局污染和命名冲突；它还强制按需导入、支持别名、可控制可见性（!private），且只执行一次（即使多个文件 @use 同一模块）。
常见错误现象：把 @use 当成 @import 直接替换后，变量访问失败，比如 $primary-color 报错 Undefined variable —— 因为没加命名空间前缀。
- 必须用
namespace.$variable访问（如colors.$primary-color） - 可通过
as *解构导入全部内容（@use "variables" as *），但仅限单个模块，多模块时仍会冲突 - 路径必须带引号，且不自动补
_或.scss（@use "variables"等价于@use "_variables.scss"） - 不能在嵌套规则或
@media内部使用@use
@forward 适合构建设计系统入口文件
当你有一组基础变量（_colors.scss）、工具函数（_mixins.scss）、断点配置（_breakpoints.scss），想统一暴露给项目其他地方时，@forward 就是“导出聚合层” —— 它不引入内容，只转发声明。
典型场景：项目根目录建一个 index.scss，作为唯一公共入口：
@forward "colors"; @forward "mixins"; @forward "breakpoints" show breakpoint-sm, breakpoint-lg;
这样下游文件只需 @use "index" as ui，就能通过 ui.$primary-color、ui.text-truncate() 访问所有能力。
-
show/hide可精确控制哪些成员对外可见 -
@forward "path" as prefix-能给转发的成员批量加前缀（如prefix-text-truncate） - 转发链支持多层（A
@forwardB，B@forwardC），但循环转发会报错
迁移旧 @import 项目的实操要点
直接全局搜索替换 @import → @use 会失败。关键在于重构导入顺序和命名空间引用。
- 所有
@use必须放在文件顶部，且在任何 CSS 规则、@mixin、@function声明之前 - 如果原
@import "variables"后直接用了$font-size-base，现在得写成variables.$font-size-base（假设别名为variables） - 多个文件都
@use "variables"没问题，Sass 保证只解析一次；但若混用@use和@forward，注意别名冲突（如两个@use "x" as foo在同一作用域非法） - Dart Sass 不再支持
@import "https://..."或 CSS 文件内联（@import url(...)），这些必须转为原生 CSS@import或构建工具处理
最易忽略的是：命名空间不是装饰，是访问必经路径。哪怕只用一个变量，也得写 vars.$color-error，而不是幻想它自动挂到全局 —— 这恰恰是新机制防错的核心设计。
