Sass中@forward的as语法作用解析——Angular Material示例

1. mat-* 对 fill 混入名称的影响 #

@forward 'layout-common' as mat-*; 里的 as mat-* 是给被转发模块的所有成员（混入、变量、函数等）统一添加前缀。这里的 * 代表原成员的名称，所以原模块里的 fill 混入，经过转发后对外暴露的名称会变成 mat-fill。

原模块代码示例：

// layout-common 模块
@mixin fill {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}

经过上述转发规则处理后，这个混入的对外名称就变为 mat-fill。

2. 引入后的调用方式 #

当你通过 @use '../../somemodule' as test; 引入包含该转发规则的模块时，调用这个混入确实需要写成 @include test.mat-fill();。

原因是 somemodule 已经把 layout-common 的成员以带 mat- 前缀的形式转发出来，所以你需要通过 test 这个命名空间，加上转发后的前缀名称 mat-fill 来调用该混入。

内容的提问来源于stack exchange，提问作者Ole