sass中@import升级@use的使用区别与案例

在 Sass 中，@import 和 @use 都用于模块化代码，但二者有显著区别。以下是主要差异和具体案例说明：

核心区别对比

案例说明

1. 基础使用对比

// ⚠️ @import 方式
// _variables.scss
$primary-color: #3498db;

// main.scss
@import 'variables';
.button { color: $primary-color; }

// 🔧 @use 方式
// _variables.scss
$primary-color: #3498db;

// main.scss
@use 'variables' as vars;
.button { color: vars.$primary-color; }

2. 命名空间冲突解决

// 文件结构
// _theme.scss
$color: red;

// _utils.scss
$color: blue;

// ❌ @import 的冲突
@import 'theme';
@import 'utils';
.text { color: $color; } // 输出 blue（后者覆盖前者）

// ✅ @use 的隔离
@use 'theme';
@use 'utils';
.text { 
  color: theme.$color; // red
  background: utils.$color; // blue
}

3. 私有成员保护

// _config.scss
$-private-var: 10px; // 私有变量（仅文件内可用）
$public-var: 20px;   // 公共变量

// ❌ @import 无法隐藏
@import 'config';
.element { margin: $-private-var; } // 仍可访问

// ✅ @use 保护私有
@use 'config';
.element { 
  margin: config.$public-var; // 正常
  // padding: config.$-private-var; // 报错！
}

4. 按需加载机制

// 多次引用同一文件时：
// ❌ @import 重复加载
@import 'module';
@import 'module'; // 重复编译

// ✅ @use 智能单例
@use 'module';
@use 'module'; // 无重复问题

迁移建议

1. 逐步替换：优先在新增文件中使用 @use，逐步替换旧 @import
2. 命名空间简化：通过 @use 'module' as *; 省略命名空间（慎用，可能引发冲突）
3. 结合 @forward：使用 @forward 转发模块（适合工具库开发）
4. 注意私有变量规则: 使用@use时需要注意 -或者_ 表示私有变量，@import旧代码可能会定义-或者_开头的变量。使用@use引入时会报错

总结

• 弃用 @import：Sass 官方已计划逐步弃用 @import，推荐使用 @use
• 模块化优势：@use 通过作用域隔离和显式依赖，提升代码可维护性
• 未来兼容性：新项目应直接采用 @use + @forward 体系