自学教程@forward规则加载 Sass 样式表，并在样式表加载 @use 规则时使其mixin、函数和变量可用。它可以跨多个文件组织 Sass 库，同时允许其用户加载单个入口点文件。
如果您确实在同一文件中为同一模块编写了@forward和@use，则最好先编写@forward。这样，如果您的用户想要配置转发的模块，则该配置将在@use加载之前应用于@forward，而无需任何配置。
语法： @forward "<url>"
SCSS
// src/_list.scss
@mixin list-reset {
margin: 0;
padding: 0;
list-style: none;
}
// bootstrap.scss
@forward "src/list";
// styles.scss
@use "bootstrap";
li {
@include bootstrap.list-reset;
}编译为 CSS 结果：
CSS
li {
margin: 0;
padding: 0;
list-style: none;
}添加前缀
语法： @forward "<url>" as <prefix>-*
将给定的前缀添加到模块转发的每个mixin，函数和变量名称的开头。例如，如果模块定义了一个名为的成员reset并进行了转发as list-*，则下游样式表会将其称为 list-reset。
实例
// src/_list.scss
@mixin reset {
margin: 0;
padding: 0;
list-style: none;
}
// bootstrap.scss
@forward "src/list" as list-*;
// styles.scss
@use "bootstrap";
li {
@include bootstrap.list-reset;
}编译为 CSS 结果：
CSS
li {
margin: 0;
padding: 0;
list-style: none;
}
控制可见性
语法：@forward "<url>" hide <members...> or @forward "<url>" show <members...>.
该hide表格意味着不应转发列出的成员，而应转发其他所有成员。该show表格意味着只应转发已命名的成员。在这两种形式中，您都列出了 mixin，函数或变量的名称（包括 $）。
实例
// src/_list.scss
$horizontal-list-gap: 2em;
@mixin list-reset {
margin: 0;
padding: 0;
list-style: none;
}
@mixin list-horizontal {
@include reset;
li {
display: inline-block;
margin: {
left: -2px;
right: $horizontal-list-gap;
}
}
}
// bootstrap.scss
@forward "src/list" hide list-reset, $horizontal-list-gap;配置模块
该@forward规则还可以使用configuration加载模块：
SCSS
// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
code {
border-radius: $border-radius;
box-shadow: $box-shadow;
}
// _opinionated.scss
@forward 'library' with (
$black: #222 !default,
$border-radius: 0.1rem !default
);
// style.scss
@use 'opinionated' with ($black: #333);编译为 CSS 结果：
CSS
code {
border-radius: 0.1rem;
box-shadow: 0 0.5rem 1rem rgba(51, 51, 51, 0.15);
}
分享笔记