在 Sass 中，@forward 指令用于将多个模块的成员（变量、混合、函数等）集中转发到一个入口文件，使外部代码可以通过一个统一的命名空间访问这些成员。它与 @use 的核心区别在于：

• @use：引入模块并直接使用其成员（需通过命名空间）。
• @forward：仅转发模块的成员，自身不直接使用它们，目的是创建模块的“聚合层”。

一、基本用法

假设有多个模块需要组合，通过 @forward 将它们统一暴露：

// src/_theme.scss
$primary: red !default;
$text-color: #333 !default;

// src/_mixins.scss
@mixin shadow($size) {
  box-shadow: 0 0 $size rgba(0, 0, 0, 0.1);
}

// src/index.scss（入口文件）
@forward "theme"; // 转发 _theme.scss 的所有成员
@forward "mixins"; // 转发 _mixins.scss 的所有成员

外部文件通过 @use 引入入口文件后，可以访问所有转发的成员：

// main.scss
@use "src/index" as *; // 使用全局命名空间（或自定义命名空间）

.button {
  color: $primary;
  @include shadow(10px);
}

二、关键特性

1、过滤转发的内容

使用 show 和 hide 过滤需要转发的成员：

// src/index.scss
@forward "theme" show $primary; // 只转发 $primary
@forward "mixins" hide shadow; // 转发除 shadow 外的所有成员

2、添加前缀/后缀

通过 as 为转发的成员添加统一命名空间前缀：

// src/index.scss
@forward "theme" as theme-*; // 所有成员变为 theme-$primary, theme-$text-color
@forward "mixins" as mix-*; // 成员变为 mix-shadow

// 外部使用
@use "src/index";
.button {
  color: index.theme-$primary;
  @include index.mix-shadow(10px);
}

3、转发时重置模块变量

使用 with 在转发时为模块变量提供默认值：

// src/index.scss
@forward "theme" with (
  $primary: blue !default,
  // 覆盖 _theme.scss 的默认值
  $text-color: #666 !default
);

三、与 @use 的配合

@forward 通常与 @use 结合使用，例如在入口文件中同时转发模块并引入自身依赖：

// src/index.scss
@use "config" as *; // 引入配置模块
@forward "theme" with (
  $primary: $brand-color !default
); // 使用配置值覆盖
@forward "mixins";

四、典型应用场景

1、构建主题系统

index.scss

// src/theme/index.scss
@forward "variables";
@forward "functions";

index.scss

// src/theme/_variables.scss
$primary: red !default;
$secondary: blue !default;

_functions.scss

// src/theme/_functions.scss
@function darken($color, $amount) {
  /* ... */
}

2、工具库封装

index.scss

// src/utils/index.scss
@forward "grid";
@forward "typography";

_grid.scss

// src/utils/_grid.scss
@mixin grid($columns) {
  /* ... */
}

_typography.scss

// src/utils/_typography.scss
@mixin text-style($size) {
  /* ... */
}

五、注意事项

错误写法	正确写法	说明
@forward 'module' as *;	@forward 'module' as prefix-*;	避免全局命名冲突
@forward 'module' hide $_private;	无需隐藏私有成员（以 _ 开头的成员自动隐藏）	Sass 默认隐藏私有成员
循环转发模块（A → B → A）	解耦模块逻辑	防止编译死循环

六、项目结构示例

styles/
├── utils/
│   ├── _grid.scss      // 网格工具
│   ├── _typography.scss// 排版工具
│   └── index.scss      // 入口文件（@forward 所有工具）
├── theme/
│   ├── _variables.scss // 主题变量
│   └── index.scss      // 入口文件（@forward 变量）
└── main.scss           // 主文件，@use 入口模块

总结

• 核心作用：@forward 是模块化设计的“桥梁”，用于组织分散的模块，形成清晰的 API 入口。
• 最佳实践：
  1. 使用 show/hide 控制暴露的成员。
  2. 通过 as 避免命名冲突。
  3. 结合 @use 管理内部依赖。
• 适用场景：构建第三方库、主题系统或复杂项目的样式架构。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24