@forward

规则是书面的@forward "<url>"。就像一样，它以给定的URL加载模块  @use，但是它使加载的模块的公共成员可供模块的用户使用，就像它们是直接在模块中定义的一样。但是，这些成员在您的模块中不可用-如果您愿意，还需要编写一条@use规则。不用担心，它只会加载一次模块！

如果您确实在同一文件中为同一模块同时编写了a @forward和a @use，那么最好编写第@forward一个。这样，如果您的用户想要配置转发的模块，则该配置将@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;
}

// 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>-*，并将给定的前缀添加到模块转发的每个mixin，函数和变量名称的开头。例如，如果模块定义了一个名为的成员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 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 reset

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

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

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

兼容性：

Dart·Sass（Dart Sass）

从  1.24.0开始

LibSass

✗

rubySass

✗

该@forward规则还可以使用configuration加载模块。这几乎与的工作原理相同，但@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);
}