@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);
}