Skip to content
目录

@forward@use的解析规则

1. 模块解析

当解析一个 Sass 文件时,Sass 解析器会首先查找所有的 @forward@use 规则。这些规则告诉 Sass 解析器要加载哪些模块,以及如何处理它们的公共 API。

2. 应用 @forward 规则

@forward 规则不仅可以用来重新导出模块,还可以用来调整模块的公共 API。通过 with 子句,可以覆盖被转发模块的任何默认变量。这时,Sass 会检查所有使用了 !default 标记的变量,如果在被 @forward 的模块中发现了匹配的变量定义,那么会用 with 子句中指定的值覆盖这些默认值。

3. 应用 @use 规则

当 Sass 解析器处理 @use 规则时,它会检查是否已有相应模块的实例。模块一旦被 @use 加载,就会成为一个单独的实例,并初始化模块内的所有变量和混合。如果这个模块被 @forward 声明修改过,@use 会使用这个已经修改过的版本。

4. 模块隔离

每个使用 @use 引用的模块都有自己的作用域名。在 @use 'b' as *; 的情况下,所有从 'b' 模块导出的成员都将在全局作用域中可用,也就是说,它们不带有任何特定前缀,可以在文件中任何位置使用。

5. 执行和输出

Sass 解析器处理完所有规则后,所有样式会被编译成最终的 CSS @forward@use,确保仅将需要的样式和逻辑暴露或保持隔离,有效地管理和封装样式。 这种模块化方法帮助前端开发者可以创建更可维护、可扩展的 CSS代码库。通过 @forward@use 的恰当使用,可以显著改善大型项目中的样式处理过程。

补充几点:

  1. 关于模块实例化,通过 @use 加载的同一模块如果在多处被引用,只会实例化一次,这有助于避免变量和混入重复定义。
  2. 除了变量,@forward 的 with 子句还可以用来添加变量
  3. @forward 和 @use 必须出现在任何其他规则之前,包括样式规则。唯一的例外是 @charset。
本站总访问量 次 本站访客数 人次

1111111111111111111