在前端开发中，我们经常会使用 CSS 预处理器来提高 CSS 的编写效率和可维护性。SASS 是一种流行的 CSS 预处理器，它支持多种语法和功能，其中 @import 和 @use 是两种常用的导入外部文件的方式。本文将介绍它们的区别和用法。
@import
@import 是 SASS 中最早的导入外部文件的方式，它的语法如下：
@import "path/to/file";
其中，"path/to/file" 是要导入的文件路径，可以是相对路径或绝对路径。@import 会将导入的文件的内容合并到当前文件中，从而形成一个单独的 CSS 文件。
@import 的缺点是容易产生重复的 CSS 代码，因为每次导入都会将整个文件的内容合并到当前文件中。如果多个文件都导入了同一个文件，那么最终生成的 CSS 文件中就会包含多个相同的样式规则，从而导致文件体积增大和样式冲突的问题。
@use
为了解决 @import 的缺点，SASS 3.7 引入了 @use，它的语法如下：
@use "path/to/file" as name;
其中，"path/to/file" 是要导入的文件路径，可以是相对路径或绝对路径；name 是导入的文件的命名空间，可以是任意字符串。@use 会将导入的文件作为一个模块来处理，只有在需要使用其中的变量、函数或混合器时才会加载它们，从而避免了重复的 CSS 代码和样式冲突的问题。
@use 的优点是：
- 支持命名空间，可以避免样式冲突的问题；
- 可以按需加载，提高了性能；
- 支持别名，可以方便地引用模块中的变量、函数或混合器。
@use 还有一些高级用法，比如可以指定只导入模块中的某些部分，或者可以将导入的模块作为一个 mixin 使用。这些用法超出了本文的范围，感兴趣的读者可以参考 SASS 官方文档。
示例代码
下面是一个示例代码，演示了如何使用 @import 和 @use 导入外部文件：
-- -------------------- ---- ------- -- ---------- -- --------------- ----- ------ ------ - -------- ------------- -------- ----- ---- ------ ----- ----------------- --------------- -------------- ------- - -- --------- -- ------- ------- ------- - -------- ------- - -- ------------- -- ---- ------ -- -- ------- - -------- --------- -
其中，_base.scss 定义了一个 $primary-color 变量和一个 button mixin；main.scss 和 main-use.scss 分别使用 @import 和 @use 导入了 _base.scss 中的内容，并分别使用了 button mixin。注意，main-use.scss 中使用了别名 b 来引用 _base.scss 中的内容。
总结
@import 和 @use 都是 SASS 中常用的导入外部文件的方式，它们有着不同的语法和功能，需要根据具体的情况选择使用。在实际开发中，建议使用 @use，因为它更加灵活和高效，可以避免常见的样式冲突和重复代码的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e142301886fbafa4e4a30e