在 Sass 中，@use 是模块系统的核心指令，用于导入其他 Sass 文件（称为“模块”），并提供了更严格的封装性、命名空间控制和变量管理。以下是 @use 的详细用法和特性：

一、简介

1、基本语法

• 命名空间：默认以文件名（不含下划线和扩展名）作为命名空间。例如，_buttons.scss 的命名空间是 buttons。
• 访问成员：必须通过命名空间访问（如 module.$color）。

// 导入模块（文件路径需省略 `.scss` 扩展名）
@use "path/to/module";

// 使用模块中的变量/混合/函数
.element {
  color: module.$color; // 变量
  @include module.mixin(); // 混合
  width: module.function(); // 函数
}

2、别名（as）

可为模块指定别名，避免命名冲突：

@use "path/to/module" as m;

.element {
  color: m.$color;
}

注意

as * 可以消除命名空间隔离，直接使用导入文件的变量、混合、函数。但是可能引起命名冲突

@use "colors" as *; // 导入_colors.scss所有成员
body {
  color: $primary-color;
} // 直接使用变量

3、共有变量、私有变量

• 私有变量：以 - 或 _ 开头的变量/混合/函数不会被外部访问。
• 公有变量：其他成员默认导出。

示例：

_module.scss

$-private-color: red;    // 私有变量
$public-color: blue;     // 公有变量

@mixin public-mixin { ... }
@function -private-fn { ... }

main.scss

@use "module";

.element {
  color: module.$public-color; // ✅ 允许
  // background: module.$-private-color; // ❌ 报错
}

4、重置默认变量

通过 with 覆盖模块中定义的默认变量（需变量用 !default 标记）。

示例：

_config.scss

// _config.scss
$primary-color: blue !default; // 允许被覆盖的默认值

main.scss

// main.scss
@use "config" with (
  $primary-color: red // 覆盖默认值
);

.element {
  color: config.$primary-color; // 输出 red
}

5、导入多个模块

@use "module1";
@use "module2";
@use "module3" as m3;

.element {
  color: module1.$color;
  @include m3.mixin();
}

二、模块加载规则

• 文件路径：默认会查找 .sass、.scss 或 .css 文件，可省略扩展名。
• 单次加载：同一模块只会被加载一次（避免重复代码）。
• 路径解析：
  • 相对路径：@use './variables'（当前目录）。
  • 别名路径：需配合构建工具（如 Webpack）配置。
  • 绝对路径：不推荐。

三、与 @import 的区别

特性	@use	@import（已废弃）
作用域	独立命名空间	全局作用域（易冲突）
成员访问	需通过命名空间（如 module.$var）	直接访问（全局暴露）
变量覆盖	通过 with 显式配置	隐式覆盖（容易污染全局）
重复加载	自动去重	可能重复加载
私有成员	支持（- 或 _ 前缀）	不支持

四、高级用法

1、转发成员（@forward）

将多个模块的成员统一转发到一个入口文件：

// _bundle.scss
@forward "module1";
@forward "module2" as m2-*; // 添加前缀

2、复合配置

同时导入模块并覆盖其变量：

@use "module" with (
  $color: red,
  $padding: 1rem
);

九、总结

@use 的核心优势：

1. 封装性：通过命名空间隔离代码，避免全局污染。
2. 可配置性：通过 with 安全覆盖模块默认值。
3. 可维护性：强制显式依赖，减少隐式副作用。

优先使用 @use 替代旧版 @import，这是现代 Sass 开发的最佳实践。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24