@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
的恰当使用,可以显著改善大型项目中的样式处理过程。
补充几点:
- 关于模块实例化,通过 @use 加载的同一模块如果在多处被引用,只会实例化一次,这有助于避免变量和混入重复定义。
- 除了变量,@forward 的 with 子句还可以用来添加变量
- @forward 和 @use 必须出现在任何其他规则之前,包括样式规则。唯一的例外是 @charset。