重用 @forward

在SCSS(Sass)中，@forward是一个用于导出样式模块的规则。它允许将样式模块的一部分或全部公开(导出)，以便其他样式文件可以使用这些导出的样式。

@forward 规则加载 Sass 样式表并使其 mixins、functions 和 variables 当你的样式表加载了 @use 规则时可用。它使得跨多个文件组织 Sass 库成为可能，同时允许用户加载单个入口点文件。

规则写为@forward "<url>"。它像“@use”一样在给定的 URL 加载模块，但它使加载模块的 public 成员可供模块用户使用尽管它们是直接在您的模块中定义的。但是，这些成员在您的模块中不可用——如果您需要，您还需要编写一个@use规则。别担心，它只会加载模块一次！

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

💡 Fun fact:

当涉及到模块的 CSS 时，@forward 规则就像@use 一样。来自转发模块的样式将包含在编译后的 CSS 输出中，并且带有@forward的模块可以 extend 它，即使它不是 @use。

scss

Scss

scss

// 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 "<url>" as <prefix>-*，它将给定的前缀添加到模块转发的每个 mixin、函数和变量名的开头。例如，如果模块定义了一个名为“reset”的成员并将其转发为“list-*”，则下游样式表会将其称为“list-reset”。

scss

Scss

scss

// 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;
}

控制可见性

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

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

scss

Scss

scss

// 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;

配置模块

兼容性：自 1.24.0 以来的 Dart Sass | 库萨斯✗ | Ruby Sass ✗

@forward 规则还可以使用 configuration 加载模块。这在很大程度上与 @use 的工作方式相同，但有一个补充：@forward 规则的配置可以在其配置中使用 !default 标志。这允许模块更改上游样式表的默认值，同时仍然允许下游样式表覆盖它们。

scss

Scss

scss

// _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);