Lzh on GitHub

@forward

@forward 规则加载一个 Sass 样式表，并在你的样式表使用 @use 规则加载时，使其混合宏、函数和变量可用。这使得可以将 Sass 库组织到许多文件中，同时允许用户加载单个入口文件。

@forward 规则加载一个 Sass 样式表，并在你的样式表使用 @use 规则加载时，使其混合宏、函数和变量可用。这使得可以将 Sass 库组织到许多文件中，同时允许用户加载单个入口文件。

该规则的写法是 @forward ""。它像 @use 一样加载给定 URL 的模块，但它使加载模块的公共成员可供你的模块用户使用，就好像它们是直接在你的模块中定义的一样。不过，这些成员在你的模块中不可用——如果你想要，你需要也编写一个 @use 规则。别担心，它只会加载模块一次！

如果你在同一个文件中同时为同一个模块编写了 @forward 和 @use，那么先编写 @forward 总是好的。这样，如果你的用户想要配置被转发的模块，该配置将在你的 @use 加载它之前应用于 @forward，而无需任何配置。

当涉及到模块的 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;
}

添加前缀

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

写法是 @forward "" as -，它将在模块转发的每个混合宏、函数和变量名称的开头添加给定的前缀。例如，如果模块定义了一个名为 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;
}

控制可见性

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

hide 形式意味着列出的成员不应被转发，但其他所有成员都应被转发。show 形式意味着只有** 命名的成员才应被转发。在这两种形式中，你都列出混合宏、函数或变量的名称（包括 $）。

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

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

@mixin list-horizontal {
  @include list-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 规则的配置可以在其配置中使用 !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);