在前端开发中，CSS 的预处理器 SASS 是非常常见的工具，它提供了许多便利的语法和功能，例如 mixin、变量、嵌套等。而 @forward 是 SASS 3.9 新增的一个指令，它可以帮助开发者更好地组织自己的代码库。
什么是 @forward？
简单来说，@forward 是将一个 mixin 或函数从当前文件转发到另一处的指令。这个转发的过程中，可以对转发的内容进行重新命名和处理。举个例子，假设我们有这样一个 mixin：
@mixin my-mixin {
background-color: blue;
color: white;
}现在我们希望在其他文件中使用这个 mixin，可以通过 @forward 来实现：
@forward "path/to/mixins" as my-other-mixin;
这样，其他文件就可以像下面这样使用 my-other-mixin：
.my-class {
@include my-other-mixin;
}当然，@forward 的实际用途不只是这一点，下面我们来看一些更深入的应用。
如何使用 @forward？
一般来说，@forward 的语法是这样的：
@forward "path/to/file" as <new-name> [hide <original-names>, ...];
其中 path/to/file 是被引用的 mixin、函数等的路径，new-name 是转发之后的新名称，hide 这个选项是用来隐藏被转发的 mixin、函数等的。
转发 mixin
在前面的例子中，我们已经介绍了如何转发一个 mixin。值得注意的是，我们可以通过设置 hide 选项来隐藏转发的 mixin，这样其他文件就只能使用 my-other-mixin，而不能使用 my-mixin。
@forward "path/to/mixins" as my-other-mixin hide my-mixin;
转发函数
除了 mixin，我们还可以使用 @forward 来转发函数。例如，如果我们有这样一个函数：
@function rem($pxVal) {
@return ($pxVal / 16) * 1rem; // 假设默认字号为 16px
}想要在其他文件中使用它，可以这样写：
@forward "path/to/fn" as my-rem;
然后就可以像这样使用 my-rem：
.my-class {
font-size: my-rem(20px);
}其中 20px 就会被转换为 1.25rem。
转发变量
在 SASS 中，变量是非常有用的，我们可以使用它来存储各种值，例如颜色、字号、距离等。有时候，我们需要在一个文件中定义一些全局变量，并在另一个文件中使用它们。这个时候，@forward 也能帮上忙：
-- -------------------- ---- ------- -- ------ --------------- ----- ----------------- ------ -- ------ -------- -------------- -- -------- --------- - ----------------- ----------------------- -
这样，就可以在组件样式文件中使用 my-vars.$primary-color 了。
重新命名和修改默认值
除此之外，@forward 还有两个非常实用的功能：重新命名和修改默认值。
重新命名
有时候，我们希望在转发 mixin、函数等的同时，将它们的名称更改一下。这个时候，我们可以使用 as 选项。
@forward "path/to/fn" as my-cool-fn;
这条语句的作用是将 path/to/fn 中的函数转发出去，并将它的名称更改为 my-cool-fn。
修改默认值
有时候，我们希望将 mixin、函数的默认值进行修改。例如，我们有这样一个 mixin：
@mixin my-mixin($bgColor: blue, $fgColor: white) {
background-color: $bgColor;
color: $fgColor;
}现在我们希望在转发这个 mixin 的时候，将 $bgColor 的默认值改为 red。
@forward "path/to/mixins" as my-other-mixin.$bgColor with ( $bgColor: red );
这样，其他文件中调用 my-other-mixin 的时候，就会默认使用红色背景色了。
总结
通过本文，我们学习了 SASS 中的 @forward 指令，它可以帮助我们更好地组织自己的代码库。@forward 可以转发 mixin、函数、变量等，同时还支持重新命名和修改默认值的功能。掌握了 @forward，并结合其他 SASS 的语法和功能，我们就可以更加高效地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fabf31f6b2d6eab318fecc