@forward

该规则的写法是 @forward "<url>"。它加载给定 URL 处的模块，就像 @use 一样，但它使加载模块的公用成员对模块用户的可用性，就好像它们是直接在您的模块中定义的一样。但是，这些成员在您的模块中不可用——如果您需要这样做，则需要编写一个 @use 规则。不用担心，它只会加载一次模块！

如果您在同一个文件中为同一个模块同时编写了 @forward 和 @use，那么始终先编写 @forward 是一个好主意。这样，如果您的用户想要配置转发模块，则该配置将在您的 @use 加载它之前应用于 @forward，而不会进行任何配置。

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

// src/_list.sass
@mixin list-reset
  margin: 0
  padding: 0
  list-style: none

// bootstrap.sass
@forward "src/list"

// styles.sass
@use "bootstrap"

li
  @include bootstrap.list-reset

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

添加前缀添加前缀永久链接

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

这写成 @forward "<url>" as <prefix>-*，它将在模块转发的每个混合器、函数和变量名称的开头添加给定的前缀。例如，如果模块定义了一个名为 reset 的成员，并且它被转发为 as 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;
}

// src/_list.sass
@mixin reset
  margin: 0
  padding: 0
  list-style: none

// bootstrap.sass
@forward "src/list" as list-*

// styles.sass
@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 表单意味着仅应转发命名成员。在这两种表单中，您都列出了混合器、函数或变量的名称（包括 $）。

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

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

@mixin list-reset
  margin: 0
  padding: 0
  list-style: none


@mixin list-horizontal
  @include list-rest

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

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

配置模块配置模块永久链接

兼容性

Dart Sass

自 1.24.0 起

LibSass

✗

Ruby Sass

✗

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

// _library.sass
$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.sass
@forward 'library' with ($black: #222 !default, $border-radius: 0.1rem !default)

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

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