作用

通过 @forward加载一个模块的成员，并将这些成员当作自己的成员对外暴露出去，类似于类似于 es6 的 export ...，通常用于跨多个文件组织 Sass 库

转发 scss

创建 forward/_common.scss

$font-size: 14px !default;
* {
  margin: 0;
  padding: 0;
  font-size: $font-size;

  color: #333;
}

@function column-width($col, $total) {
  @return percentage($col/$total);
}

@mixin bgColor($bg-color: #f2f2f2) {
  background-color: $bg-color;
}

创建启动合并 bootstrap.scss

@forward "uses/common";

使用

@use "bootstrap";
.body {
  font-size: bootstrap.$font-size;
  width: bootstrap.column-width(3, 12);
  @include bootstrap.bgColor("#F00");
}

合并 scss

新增一个_global.scss

$font-size: 28px;
@mixin base($color: #f00) {
  color: $color;
}

.gclass {
  background-color: #f00;
}

统一转发

@forward "uses/common";
@forward "uses/global";

使用

@use "bootstrap";
.body {
  font-size: bootstrap.$font-size;
  width: bootstrap.column-width(3, 12);
  @include bootstrap.bgColor("#F00");
  @include bootstrap.base("#000");
}

**问题：**当多个被转发的文件存在相同变量、函数、混入时会有问题

选择性转发

默认情况下，@forward 会将一个模块中所有成员都转发，如果只想转发某些成员，当你不想转发所有变量、函数、混入时，可使用

• @forward "module" hide $var, mixinName, fnName 禁止转发某些成员
• @forward "module" show $var, mixinName, fnName 只转发某些成员

各个成员通过逗号 , 分隔开，如果成员是变量，不能省略 $ 符号。

@forward "uses/common" as com-* hide com-bgColor, $com-font-size;
@forward "uses/global" as glob-* show base;

使用

@use "bootstrap";
.body {
  font-size: bootstrap.$com-font-size;
  width: bootstrap.com-column-width(3, 12);
  @include bootstrap.com-bgColor("#000");
  @include bootstrap.glob-base("#000");
}

转发时定义前缀

@forward "<url>" as <prefix>-*

bootstrap.scs

@forward "uses/common" as com-*;
@forward "uses/global" as glob-*;

使用

@use "bootstrap";
.body {
  font-size: bootstrap.$com-font-size;
  width: bootstrap.com-column-width(3, 12);
  @include bootstrap.com-bgColor("#F00");
  @include bootstrap.glob-base("#000");
}

转发时配置模块的成员

bootstarp

@forward "uses/common" as com-* with (
  $font-size: 30px !default
);
@forward "uses/global" as glob-* show glob-base;

使用

@use "bootstrap" with (
  $com-font-size: 50px
);
.body {
  font-size: bootstrap.$com-font-size;
  width: bootstrap.com-column-width(3, 12);
  @include bootstrap.com-bgColor("#000");
  @include bootstrap.glob-base("#000");
}

@use 与 @forward 一起使用的情况

当一个模块里面须要同时使用@use 与@forward 时，建议先使用@forward 后再使用@use

@use "uses/code";
@forward "uses/common" as com-*;
@forward "uses/global" as glob-* show glob-base;
@use "uses/common" as c1;
.test {
  font-size: c1.$font-size;
  color: code.$color;
}