Sass进阶之路：@forward 的可见性控制与变量覆盖

前言

在上一篇中，我们深入探讨了 @use 的使用， 也介绍了 @use 在使用深层模块中的变量时具有一定的缺点。所以在本文中，我们将深入解析 @forward 的核心用法。

1. 转发导入

@forward 本质是转发模块资源，是用于组织各文件中模块资源的方法。将导入的模块转发导出.

例如:

在这个示例中：

• bar.scss 使用 @forward "foo" 将 foo.scss 的成员转发出去。
• main.scss 引入 bar 后，可以通过 bar 访问 foo 中的变量（如 $foo-color）。
• 整个过程并未直接加载或编译 foo.scss，而是通过 bar 将 foo 的成员暴露给外部使用。

@forward 的核心作用是将一个模块的成员转发到另一个模块中，而不会直接加载或编译这些文件。

但是在bar.scss中是不能直接访问foo.scss中的变量. 如果使用, 需要在bar.scss中使用@use
在bar.scss文件中

• @forward 的作用只是转发, 让导入bar.scss的文件可以通过bar.$xx访问foo中的变量
• @use 的作用是导入foo.scss, 并通过foo.$xx 访问foo 中的变量

在使用 Sass 的 @forward 和 @use 引入同一个模块时，需要注意以下两点：

1. 模块加载机制：@forward 和 @use 引入同一个模块时不会重复导入。
2. 推荐顺序：@forward 和 @use 先后顺序, 建议先写@forward 再 @use：

关于@forward 和 @use 先后顺序先后顺序, sass文档给出了描述, 大概的意思是这样的:

如果在同一个文件中同时使用 @forward 和 @use 引入同一个模块，推荐将 @forward 写在前面。这样做的好处是，如果使用者（可能是指其他开发者或文件）想要在引入模块时对转发的模块进行配置（例如通过 @use 的 with 语法），那么这些配置会优先应用到 @forward 转发的模块上，然后再由你的 @use 加载模块。这样可以确保模块的配置被正确处理，而不会因为顺序问题导致配置失效。

2. 添加前缀

为了更好地理解 @forward 添加前缀的作用，我们可以先思考一个问题：
如果一个文件中通过 @forward 转发了多个模块，而这些模块中存在同名变量会怎么样？
答案是：这会导致冲突并报错。因为外部文件在引入时，是通过当前文件模块（即转发文件）访问被转发模块中的变量。如果多个被转发模块中有同名的变量，Sass 无法区分这些变量到底属于哪个模块，从而导致命名冲突。

错误示例

编译时会报如下错误信息

Error: Two forwarded modules both define a variable named $color.
4 │ @forward “foo”;
│ ━━━━━━━━━━━━━━ original @forward
5 │ @forward “baz”;
│ ^^^^^^^^^^^^^^ new @forward
src\bar.scss 5:1 @use
src\main.scss 2:1 root stylesheet

此时就可以通过 @forward 的 as 关键字为转发的模块添加前缀，从而避免在引入模块时出现命名冲突。通过 as 前缀-* 的形式，你可以为转发的所有模块成员添加一个统一的前缀。当其他文件通过 @use 引入该模块时，成员名称会以 前缀- 开头，使得不同模块的同名成员能够清晰区分，增强了代码的可维护性和可读性。

使用前缀示例:

3. 控制可见性

大多数情况下，使用 @forward 转发模块时，并不需要转发模块的全部内容，只需要暴露外部文件通过 @use 引入时所需的部分即可。为了满足这一需求，Sass 提供了 hide 和 show 两种可见性控制机制，帮助我们灵活地管理模块成员的对外访问权限。

• hide：被 hide 的成员不会通过 @forward 转发，外部文件无法访问这些成员。它适用于隐藏模块中不需要公开的部分。
• show：只有被 show 的成员会被转发，其余成员对外不可见。它适用于明确指定模块中可以公开的部分。

通过 hide 和 show，我们可以精确控制模块的可见性，避免不必要的成员暴露，从而提升代码的封装性和安全性。

示例：

如果使用转发未公开的变量, 就会发生如下错误:

Error: Undefined variable.
8 │ width: bar.$width; // 报错: 转发隐藏
│ ^^^^^^^^^^
src\main.scss 8:10 root stylesheet

4. 转发时修改默认值

Sass 中，@forward 还可以与with 结合使用，实现在转发模块时覆盖其默认变量（使用 !default 标记的变量）的值。这种方式非常适合在定制被转发模块的行为或样式时使用。

示例：

在 bar.scss 中，通过 @forward 转发 foo.scss 的变量时，可利用 with 修改其默认值。编译后，将优先使用转发时设置的新值，而非原始默认值。

如果你想要在使用 @use with 修改 @forward 转发的变量时，就需要在 @forward with 中为这些覆盖的变量添加 !default 标记，将覆盖的值也定义为默认值。这样一来，后续通过 @use with 修改时，就能轻松调整 @forward 中定义的变量值了。
示例:

需要注意的是在使用 @use with 时，不能添加 !default 字段，因为 @use with 的目标是直接覆盖模块中的变量值，而不是将它们标记为默认值。!default 仅适用于定义变量的初始值（如在模块内部或 @forward with 中）。

总结

在Sass中，@forward 是一种强大的模块资源转发工具，能够将模块的成员转发到其他模块中，而不会直接加载或编译这些文件。通过本文的探讨，我们总结了以下几点：

• 模块转发：@forward 可以将模块资源转发到其他模块中，但需要通过 @use 在转发文件中访问这些资源。

• 添加前缀：通过 as 关键字可以为转发的模块添加前缀，避免命名冲突，增强代码的可读性和可维护性。

• 可见性控制：利用hide 和 show 可以精确控制模块成员的对外访问权限，提升代码的封装性和安全性。

• 修改默认值：@forward 结合 with 可以覆盖模块中的默认变量值，适合定制模块行为或样式。

掌握 @forward 的使用，能够帮助开发者更高效地组织和复用代码，构建更灵活的样式系统。

如果觉得这篇文章对你有帮助，别忘了点赞加关注，获取更多实用干货！🥰