@forward

规则写为 @forward "<url>"。它像 @use 一样在给定的 URL 加载模块，但它使已加载模块的 民众 成员可供模块的用户使用，就像它们是直接在模块中定义的一样。不过，这些成员在你的模块中不可用 - 如果你需要，你还需要编写一条 @use 规则。别担心，它只会加载模块一次！

¥The rule is written @forward "<url>". It loads the module at the given URL just like @use, but it makes the public members of the loaded module available to users of your module as though they were defined directly in your module. Those members aren’t available in your module, though—if you want that, you’ll need to write a @use rule as well. Don’t worry, it’ll only load the module once!

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

¥If you do write both a @forward and a @use for the same module in the same file, it’s always a good idea to write the @forward first. That way, if your users want to configure the forwarded module, that configuration will be applied to the @forward before your @use loads it without any configuration.

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

添加前缀添加前缀 permalink

¥Adding a Prefix

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

¥Because module members are usually used with a namespace, short and simple names are usually the most readable option. But those names might not make sense outside the module they’re defined in, so @forward has the option of adding an extra prefix to all the members it forwards.

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

¥This is written @forward "<url>" as <prefix>-*, and it adds the given prefix to the beginning of every mixin, function, and variable name forwarded by the module. For example, if the module defines a member named reset and it’s forwarded as list-*, downstream stylesheets will refer to it as 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;
}

控制可见性控制可见性 permalink

¥Controlling Visibility

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

¥Sometimes, you don’t want to forward every member from a module. You may want to keep some members private so that only your package can use them, or you may want to require your users to load some members a different way. You can control exactly which members get forwarded by writing @forward "<url>" hide <members...> or @forward "<url>" show <members...>.

hide 表单意味着不应转发列出的成员，但应转发其他所有内容。show 形式表示仅应转发指定的成员。在这两种形式中，你都列出了 mixins、函数或变量的名称（包括 $）。

¥The hide form means that the listed members shouldn’t be forwarded, but everything else should. The show form means that only the named members should be forwarded. In both forms, you list the names of mixins, functions, or variables (including the $).

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

配置模块配置模块 permalink

¥Configuring Modules

兼容性:

Dart Sass

since 1.24.0

LibSass

✗

Ruby Sass

✗

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

¥The @forward rule can also load a module with configuration. This mostly works the same as it does for @use, with one addition: a @forward rule’s configuration can use the !default flag in its configuration. This allows a module to change the defaults of an upstream stylesheet while still allowing downstream stylesheets to override them.

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