@forward

此規則寫成 @forward "<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>-*，它會將指定的前綴加到模組轉發的每個 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 形式表示*僅*應轉發指定的成員。在這兩種形式中，您都列出 mixin、函數或變數（包括 $）的名稱。

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