SASS | @转发规则

@forward 规则处理 Sass 样式表，并在使用 @use 规则加载样式表时使它们的函数、mixin 和变量可用。跨多个文件组织 Sass 库成为可能，同时为用户提供处理单个入口点文件。

句法：

@forward ""

上面的代码加载给定 URL 上可用的模块。它使加载模块的公共成员可供模块用户使用，就好像它们是直接在模块中定义的一样。如果需要，这些成员在模块中不可用，也可能会使用@use规则。它只处理模块一次。如果@forward和@use都是为同一个文件中的同一个模块编写的，那么总是先写@forward 。通过这种方式，如果用户想要配置转发的模块，那么在@use 处理它之前，该配置将应用于@forward，无需任何配置。
例子：

// gfg/_list.css
@mixin geeks 
  font-family: times new roman
  font-size: 4px
  padding: 2px
  
  
// geeksforgeeks.scss
@forward "gfg/list"
  
  
// style.scss
@use "geeksforgeeks"
gfg1 
  @include geeksforgeeks.geeks

这将导致以下 CSS 输出：

gfg1 {
  font-family: times new roman
  font-size: 4px
  padding: 2px
}

添加前缀：
有时名称在定义它们的模块之外可能不正确，因此，@forward 可以选择为它指向的所有成员添加额外的前缀。
句法：

@forward "" as -*

这会将给定的前缀添加到模块指向的每个 mixin、函数和变量名称的开头。
例子：

// gfg/_list.css
@mixin forgeeks
  font-family: times new roman
  font-size: 4px
  padding: 2px
  
  
// geeks.scss
@forward "gfg/list" as geeks*
  
  
// style.scss
@use "geeksforgeeks"
gfg1 
  @include geeks.geeksforgeeks

这将导致以下 CSS 输出：

gfg1 {
  font-family: times new roman
  font-size: 4px
  padding: 2px
}

配置模块：
也可以使用@forward 规则处理带有配置的模块。 @forward 规则的配置也可以在其配置中使用 !default 标志。这允许模块更改上游样式表的默认值，同时还允许下游样式表覆盖它们。
例子：

// _gfg.sass
$green: #000 !default
$border-radius: 2px !default
$box-shadow: 0 2px 1px rgba($green, 1) !default
  
  
geeks
  border-radius: $border-radius
  box-shadow: $box-shadow
  
// _geeksforgeeks.sass
@forward 'gfg' with ($green: #222 !default,
               $border-radius: 4px !default)
  
  
// style.sass
@use 'geeksforgeeks' with ($green: #333)

这将导致以下 CSS 输出：

geeks {
  border-radius: 4px;
  box-shadow: 0 2px 1px rgba(51, 51, 51, 1);
}