@forward

Правило написано @forward "<url>". Оно загружает модуль по указанному URL, так же как @use, но делает общедоступные члены загруженного модуля доступными пользователям вашего модуля так, как будто они были определены непосредственно в вашем модуле. Однако эти члены не доступны в вашем модуле — если вам это нужно, вам необходимо написать правило @use. Не беспокойтесь, модуль будет загружен только один раз!

Если вы действительно напишете и правило @forward, и правило @use для одного и того же модуля в одном и том же файле, всегда лучше написать правило @forward в первую очередь. Таким образом, если ваши пользователи захотят настроить переданный модуль, эта настройка будет применена к модулю @forward до того, как ваше правило @use загрузит его без какой-либо настройки.

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

// SASS
// src/_list.sass
@mixin list-reset
  margin: 0
  padding: 0
  list-style: none

// SASS
// bootstrap.sass
@forward "src/list"

// SASS
// styles.sass
@use "bootstrap"

li
  @include bootstrap.list-reset

/* CSS */
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

Добавление префикса

Поскольку члены модуля обычно используются с пространством имен, короткие и простые имена обычно являются наиболее удобочитаемым вариантом. Но эти имена могут быть нелогичными за пределами модуля, в котором они определены, поэтому у правила @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;
}

// SASS
// src/_list.sass
@mixin reset
  margin: 0
  padding: 0
  list-style: none

// SASS
// bootstrap.sass
@forward "src/list" as list-*

// SASS
// styles.sass
@use "bootstrap"

li
  @include bootstrap.list-reset

/* CSS */
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

Управление видимостью

Иногда вы не хотите передавать все члены из модуля. Вы можете сохранить некоторые члены конфиденциальными, чтобы их мог использовать только ваш пакет, или потребовать от ваших пользователей загружать некоторые члены другим способом. Вы можете контролировать, какие именно члены будут переданы, написав правило @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;

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

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

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

// SASS
// _opinionated.sass
@forward 'library' with ($black: #222 !default, $border-radius: 0.1rem !default)

// SASS
// style.sass
@use 'opinionated' with ($black: #333)

/* CSS */
code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(51, 51, 51, 0.15);
}