sass @forward的使用

作用、语法

https://sass-lang.com/documentation/at-rules/forward/

@forward加载一个Sass样式表，并在你的样式表使用@use规则加载时，使其minxin、函数和变量可用。它使得在许多文件中组织Sass库成为可能，同时允许用户加载单个入口文件。

语法：

@forward "<url>"

它象@use一样加载给定URL的模块，但它使加载模块的公共成员对你的模块的用户可用，就好像它们直接在你的模块中定义一样。

@forward scss

例如：

加一个前缀

因为模块成员通常使用命名空间，简短和简单的名字通常是最易读的选项。但这些名称在它们定义的模块之外可能没有意义，所以@forward可以选择为其转发的所有成员添加一个额外的前缀。

可以写作 @forward "<url>" as <prefix>-*，它会将给定的前缀添加到模块转发的每个mixin、函数和变量名称的开头。例如，如果模块定义了一个名为reset的成员，并且以list-*的形式转发，下游样式表将引用它为list-reset。

例如：

控制可见性

有时，你不想转发模块中的每个成员。你可能想保留一些私有成员，以便只有你的包可以使用它们，或者你可能希望你的用户以不同的方式加载一些成员。
你可以利用@forward "<url>" hide <members...> 或者 @forward "<url>" show <members...> 来精确控制哪些成员被转发。

hide形式意味着列出的成员不应该被转发，但其它所有内容都应该。show形式意味着只有命名的成员应该被转发。在两种形式中，你列出mixin、函数或变量的名称（包括$）。

例如：

配置模块

@forward规则也可以加载带有配置的模块。这大部分与@use的工作方式相同，但有一个附加功能：@forward规则的配置可以使用其配置中的!default标志。这使得一个模块可以更改上游样式表的默认值，同时仍然允许下游样式表覆盖它们。

例如：