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

互換性

Dart Sass

1.24.0以降

LibSass

✗

Ruby Sass

✗

@forwardルールは、構成を使用してモジュールを読み込むこともできます。これは、@useの場合とほぼ同じように機能しますが、1つの追加事項があります。@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);
}