SCSS 库开发者利器 @forward

@forward 的基本用法

@forward 语句可以引入另一个模块的所有变量、mixins和函数，将它们直接作为当前模块的 API 暴露出去，而不会真的在当前模块增加代码。这样，库作者可以更好地在不同源文件之间拆分代码。不同于 @use， @forward不会给变量添加命名空间。

@forward 转发示例

针对模块内部的成员进行成员变量、函数、mixins 的转发，示例 :

# base.scss 基础变量模块定义文件

$padding:22px;
$margin:22px;

# 创建 forward 中间转发文件

@forward "base.scss";

# 在 main.scss 中使用 base 模块

@use "forward";
p{padding:forward.$padding;}

@forward 添加前缀

大多数情况下，一个样式库会存在一个入口文件 index.scss，然后在 index.scss 中引入其他的子文件。这种结构类似于多合一模块。如果要在某一文件中 @forward 多个子模块，就可以使用 as 子句，来使子模块下的成员自动带上前缀以区分。示例 :

# base.scss 基础变量模块定义文件

$padding:22px;
$margin:22px;

# 创建 forward 中间转发文件

@forward "base.scss" as base-*;

# 在 main.scss 中使用 base 模块

@use "forward";
p{padding:forward.$base-padding;}

@forward 控制可见性

用 show/ hide控制成员是否可见 ：

@forward "base.scss" as base-* hide $base-padding;

上面的例子演示了将 base-padding 属性设置为不可见（ 也不可用 ）。

@forward 控制变量值

通过 with 函数可以改变模块内部变量的初始值，示例 ：

# base.scss 基础变量模块定义文件，注意 !default

$padding:29px !default;
$margin:22px;

# 创建 forward 中间转发文件

@forward "base.scss" with(
    $padding:80px
);

# 在 main.scss 中使用 base 模块

@use "forward";
p{padding:forward.$padding;}