@forward

这个规则的写法是 @forward "<url>"。它像 @use 一样加载给定 URL 的模块，但是使加载模块的公共成员对你的模块的用户可用，就像它们是直接在你的模块中定义的一样。不过，这些成员在你的模块中不可用——如果你想要那样，你还需要编写一个 @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;
}

添加前缀添加前缀 permalink

因为模块成员通常与命名空间一起使用，所以短小简单的名称通常是最具可读性的选项。但这些名称可能在定义它们的模块之外没有意义，所以 @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;
}

控制可见性控制可见性 permalink

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

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

配置模块配置模块 permalink

Compatibility:

Dart Sass

since 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);
}