@import/@use/@forward的区别和使用
前言
在 Sass 中，我们经常使用 @import 来导入其他 SCSS 文件。然而，随着 Sass 语言的不断发展，@import 逐渐暴露出一些问题，并且在最新版本中已经不推荐继续使用。
为了改进模块化的管理和避免潜在的问题，Sass 引入了新的导入机制：@use 和 @forward。
这些新语法不仅解决了 @import 的不足，还提供了更强大的功能，使得样式表的结构更加清晰和模块化。
本文将深入探讨 @import、@use 和 @forward 的区别，并说明如何在实际开发中正确使用它们。
@import
@import带来了哪些问题：
- 全局变量污染：
@import导入的文件会把所有定义的变量、函数等直接放入全局作用域。 - 不可追溯来源：使用变量时没有标注变量的出处，导致大型项目在溯源时较为困难。
- 重复输出：重复导入相同的文件，这意味着每次导入都会重新编译一次。
@use
@use 作为 @import 的替代方案，通过命名空间的方式解决了上述问题。
-
全局变量污染：@use可以定义命名空间来解决变量的存放问题。
@use './a' as a -
不可追溯来源：
@use使用命名空间限制了不同文件间的相互访问，通过@forward暴露可访问的变量。 -
重复输出：使用@use在加载文件前会检查变量是否已加载，已加载不会重复加载。
总结：与JavaScript的import功能设计类似，JavaScript是通过文件作用域实现文件隔离，sass是通过命名空间实现文件隔离。
下面用法和@import的功能一致：
@use './a'
@forward
@forward是@use的配套导出功能。类似于JavaScript的export功能。
@forward的使用方式如下：
// 导出全部变量和方法
@forward 'b'
// 导出少数几个变量
@forward './b' show $color1, $color2;
color:$color1;
// 导入全部变量和方法
@forward 'b' as b-*;
color:b-$color1;
