第十一节：SASS @forward的使用

SASS @forward的使用

作用

通过 @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');
}

合并

新增一个_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 “” as -*

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时，建议先使用@forwar后再使用@use

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

示例2

在Sass中，@use 和 @forward 结合使用可以创建一个强大的模块化系统。以下是一个结合使用这两个指令的案例：
假设我们有一个名为 _library.scss 的文件，它包含了一些变量、混合宏和函数，我们想要在多个项目中重用这些功能。我们将使用 @forward 来公开这些功能，然后使用 @use 在其他文件中引入它们。
首先，这是 _library.scss 文件的内容：

// _library.scss
$primary-color: #333;
$secondary-color: #777;
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
@function rem($pixels) {
  @return $pixels / 16px + rem;
}

现在，我们创建一个 _library.exports.scss 文件来 @forward _library.scss 中的所有内容，并且可以添加一些命名空间或筛选特定的成员：

// _library.exports.scss
@forward 'library' as lib-*;

接下来，我们在一个组件文件 _button.scss 中使用来自 _library.exports.scss 的变量和混合宏：

// _button.scss
@use 'library.exports' as *;
.button {
  background-color: lib-$primary-color;
  color: white;
  @include lib-flex-center;
    //这里的混入是library文件里的flex-center，前缀在_library.exports.scss文件里@forward时加上的。
  padding: rem(10px) rem(20px);
}

最后，在一个主样式文件 styles.scss 中，我们 @use _button.scss 来引入按钮样式，并使用 @forward 从 _library.exports.scss 中公开的成员：

// styles.scss
@use 'button';
@use 'library.exports' as lib;
// 使用来自 library 模块的变量
body {
  background-color: lib.$secondary-color;
}
// 由于我们已经通过 library.exports 公开了 library 的内容，
// 我们可以直接在这里使用它们，例如：
.some-class {
  padding: lib.rem(15px);
}

在这个案例中，_library.exports.scss 文件作为中介，将 _library.scss 的内容 @forward 给其他文件使用。通过 @use 指令，我们可以在不同的文件中引入和使用这些模块化的功能。
编译后的CSS可能会像这样：

.button {
  background-color: #333;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.625rem 1.25rem;
}
body {
  background-color: #777;
}
.some-class {
  padding: 0.9375rem;
}

通过这种方式，我们可以在项目中创建一个清晰的模块化结构，使得样式更加可维护和可重用。

总结

• 通过 @forward 暴露的成员在导入（@use）了暴露这些成员的模块的文件中便可使用。如：_library.exports.scss文件暴露了library文件@forward 'library' as lib-*;则在styles.scss文件中@use 'library.exports' as lib;后即可使用library文件的内容
• _library.exports.scss文件中@forward 'library' as lib-*;通过lib-*后附加了前缀用于区分；使用时加上前缀lib-flex-center
• 个人疑问：为什么在 _button.scss 文件中 lib-flex-center 需要添加前缀，而在styles.scss文件中 lib.$secondary-color 和 lib.rem(15px) 不需要添加前缀？
  • 答：as lib-*是创建带前缀的命名空间，而as lib是一个新的命名空间。后声明会覆盖前面的。所以_button.scss文件中使用别名，则使用了，@forward时使用的前缀别名；而在styles.scss文件中使用了一个新的命名空间——lib。