Sass进阶之路forward-的可见性控制与变量覆盖
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
引入同一个模块时，需要注意以下两点：
模块加载机制：@forward和@use引入同一个模块时不会重复导入。推荐顺序：@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
的使用，能够帮助开发者更高效地组织和复用代码，构建更灵活的样式系统。
如果觉得这篇文章对你有帮助，别忘了点赞加关注，获取更多实用干货！🥰