@forward

@forward 和 @use 是一样的，都是加载 Sass 样式表，并在加载的样式中，使其混入、函数和变量可用。不过 @forward 可以跨多个文件来组成一个 Sass 库，一般在写一个开源的 Sass 样式库的时候你可能会用到它，在项目中是不常用的。

规则是： @forward " <url> " 。 <url> 是加载模块地址。但它使加载的模块中的公共成员，对您的模块的用户可用，就好像它们直接在您的模块中定义一样。但是，这些成员不能被外直接调用，需要 @use 来加载你的模块。别担心，它们只会加载一次模块！

当编译模块到 CSS 时， @forward 规则就像 @use 一样。来自转载模块的样式将包含在编译的 CSS 输出中，被 @forward 的模块可以扩展它，即使它没有被 @use 。

// src/_list.scss
@mixin list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

// bootstrap.scss
@forward "src/list";

// styles.scss
@use "bootstrap";

li {
  @include bootstrap.list-reset;
}

li {
  margin: 0;
  padding: 0;
  list-style: none;
}

添加前缀

因为模块成员通常与命名空间一起使用，短而简单的名称通常是最易读的选项。但是这些名称在定义它们的模块之外可能没有意义，因此可以选择，为 @forward 转载的所有成员，添加额外的前缀。

这是编写 @forward " <url> " 作为 <prefix>-* 的，它将给定的前缀添加到转载的模块的每个 mixin、函数和变量名的开头。例如，如果模块定义了一个名为 reset 的成员，并且它是被当作 list-* 转载的，下游样式表会将其当为 list-reset 。

// src/_list.scss
@mixin reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

// bootstrap.scss
@forward "src/list" as list-*;

// styles.scss
@use "bootstrap";

li {
  @include bootstrap.list-reset;
}

li {
  margin: 0;
  padding: 0;
  list-style: none;
}

控制可见性

有时，您不想转发模块中的每个成员。您可能希望将某些成员保密，以便只有您的包可以使用它们，或者您可能希望要求您的用户以不同的方式加载某些成员。您可以通过 @forward " <url> " hide <members...> 或者 @forward " <url> " show <members...> ，来来准确控制转载哪些成员。

hide 形式意味着不应该转载列出的成员，但其他所有内容都应该转载。 show 形式意味着只应转发指定的成员。在这两种形式中，您都列出了 mixin、函数或变量（包括 $ ）的名称。

// src/_list.scss
$horizontal-list-gap: 2em;

@mixin list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin list-horizontal {
  @include reset;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: $horizontal-list-gap;
    }
  }
}

// bootstrap.scss
@forward "src/list" hide list-reset, $horizontal-list-gap;

配置模块

该 @forward 规则，还可以加载带有配置的模块。这与 @use 用法一样， @forward " <url> " with ，转载的模块中，可以使用 !default 设定上游样式表的默认值，同时仍允许下游样式表覆盖它们。

// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

// _opinionated.scss
@forward 'library' with (
  $black: #222 !default,
  $border-radius: 0.1rem !default
);

// style.scss
@use 'opinionated' with ($black: #333);

code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(51, 51, 51, 0.15);
}