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 的利用，可以大概资助开辟者更高效地构造和复用代码，构建更机动的样式体系。


假如以为这篇文章对你有资助，别忘了点赞加关注，获取更多实用干货！🥰