Scss forward命令 模块多合一

适用范围:

1. 作用:

1. 把多个模块中的内容都混合在一起
   1. 但不会真的在当前模块增加代码。

2. 缺点:

1. 不同于 @use， @forward不能给变量添加命名空间。

梗概:

@forward语句可以引入另一个模块的所有变量、mixins和函数，将它们直接作为当前模块的API暴露出去

1. 导入时隐藏某些内容

@forward "相对路径" hide 变量1,变量2;

2. 为模块中所有的成员都添加前缀:

@forward "相对路径" as 前缀*

实例:

a.scss

@mixin rounded {
    border-radius: 100px;
}
footer {
    height: 1px;
}

b.scss

$radius: 3px;

c.scss

@forward "a";
@forward "b";

index.scss

@import "c.scss";
 
.button {
    @include rounded;
    padding: $radius;
}

编译为

footer {
    height: 1px;
}
 
.button {
    border-radius: 100px;
    padding: 3px;
}

1. show/ hide

通过控制 show和 hide，可以决定模块中的哪些成员对引入后的模板可见。对隐藏的变量，在下游文件中不可以使用，相当于模块私有成员。 c.scss

@forward "a" show rounded;
@forward "b" hide $radius;

index.css

@import "c.scss";
.button {
    @include rounded;
    padding: $radius;
}
// Error: Undefined variable. padding: $radius;

2. 使用as *为子模块添加前缀

大多数情况下，一个样式库会存在一个入口文件index.scss，然后在index.scss中引入其他的子文件。 这种结构类似于一个多合一模块。那么，如果要在某一文件中 @forward多个子模块，就可以使用as <prefix>-*语句，为子模块下的成员自动带上前缀以区分。 c.scss

@forward "a" as mixin-*;
@forward "b" as var-*;

index.css

@import "c.scss";
 
.button {
    @include mixin-rounded;
    padding: $var-radius;
}

很多内置的方法就是这样使用的，嘿嘿！