@forward

Die Regel wird als @forward "<url>" geschrieben. Sie lädt das Modul unter der angegebenen  URL genau wie @use, macht aber die öffentlichen Member des geladenen Moduls für Benutzer Ihres Moduls verfügbar, so als wären sie direkt in Ihrem Modul definiert. Diese Member sind jedoch nicht in Ihrem Modul verfügbar – wenn Sie das möchten, müssen Sie auch eine @use Regel schreiben. Keine Sorge, das Modul wird nur  einmal geladen!

Wenn Sie sowohl eine @forward als auch eine @use für dasselbe Modul in derselben Datei schreiben, ist es immer eine gute Idee, die @forward zuerst zu schreiben. Auf diese Weise, wenn Ihre Benutzer das  weitergeleitete Modul konfigurieren möchten, wird diese Konfiguration auf die @forward angewendet, bevor Ihre @use es ohne  Konfiguration lädt.

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

Hinzufügen eines PräfixesHinzufügen eines Präfixes  Permalink

Da Modul-Member normalerweise mit  einem Namespace verwendet werden, sind kurze und einfache Namen in der Regel die lesbarste Option. Diese Namen sind jedoch möglicherweise außerhalb des Moduls, in dem sie definiert sind, nicht sinnvoll. Daher hat @forward die Option, allen Membern, die es  weiterleitet, ein zusätzliches Präfix hinzuzufügen.

Dies wird als @forward "<url>" as <präfix>-* geschrieben und fügt jedem Mixin, jeder Funktion und jeder Variablen, die vom Modul weitergeleitet werden, das angegebene Präfix am Anfang hinzu. Wenn das Modul beispielsweise einen Member namens reset definiert und als list-* weitergeleitet wird, werden nachgelagerte Stylesheets ihn als list-reset bezeichnen.

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

Sichtbarkeit steuernSichtbarkeit steuern permalink

Manchmal möchten Sie nicht jeden Member aus einem Modul weiterleiten. Möglicherweise möchten Sie einige Member privat halten, damit nur Ihr Paket sie verwenden kann, oder Sie möchten, dass Ihre Benutzer einige Member auf andere Weise laden. Sie können genau steuern, welche Member weitergeleitet werden, indem Sie @forward "<url>" hide <members...> oder @forward "<url>" show <members...> schreiben.

Die hide-Form bedeutet, dass die aufgeführten Member nicht weitergeleitet werden sollen, aber alles andere schon. Die show-Form bedeutet, dass nur die genannten Member weitergeleitet werden sollen. In beiden Formen listen Sie die Namen von Mixins, Funktionen oder Variablen (einschließlich des $) auf.

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

Module konfigurierenModule konfigurieren permalink

Kompatibilität

Dart Sass

seit 1.24.0

LibSass

✗

Ruby Sass

✗

Die Regel @forward kann auch ein Modul mit  Konfiguration laden. Dies funktioniert größtenteils genauso wie bei @use, mit einer Ergänzung: Die Konfiguration einer @forward-Regel kann das Flag !default in ihrer Konfiguration verwenden. Dies ermöglicht es einem Modul, die Standardwerte eines Upstream-Stylesheets zu ändern, während nachgelagerte Stylesheets sie immer noch überschreiben  können.

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