前言
SASS 是一种 CSS 预处理器，它可以让我们写出更加优雅、简洁的 CSS 代码，并且提供了一些非常实用的功能，比如变量、函数、嵌套、混合等等。在 SASS 中，我们可以使用 @import 和 @use 来导入其他 SASS 文件，这样可以将大型样式表拆分成多个文件，方便管理和维护。
在本文中，我们将详细介绍如何在 SASS 中使用 @import 和 @use，并且提供一些示例代码，帮助读者更好地理解这两个功能。
@import
@import 是 SASS 中用来导入其他 SASS 文件的语句。使用 @import 可以将其他 SASS 文件中的变量、混合、函数等等引入到当前文件中，从而方便代码的编写和管理。
基本使用
使用 @import 导入其他 SASS 文件非常简单，只需要在当前文件中使用 @import 语句即可。例如，我们有一个名为 _variables.scss 的文件，其中定义了一些变量：
// _variables.scss $primary-color: #008CBA; $secondary-color: #006B9F;
我们可以在另一个 SASS 文件中使用 @import 来引入这些变量：
// main.scss
@import 'variables';
body {
background-color: $primary-color;
}这样，我们就可以在 main.scss 文件中使用 _variables.scss 中定义的变量了。注意，在使用 @import 导入文件时，不需要写文件扩展名（.scss）。
导入顺序
在 SASS 中，@import 语句的顺序非常重要。如果我们在 main.scss 文件中使用了 @import 导入了其他文件，那么这些文件中定义的变量、混合、函数等等就可以在 main.scss 文件中使用。但是，如果我们在这些文件中使用了 @import 导入了其他文件，那么这些文件中定义的变量、混合、函数等等就不可以在 main.scss 文件中使用了。
例如，我们有三个文件：
-- -------------------- ---- ------- -- ---------- --------------- -------- -- --------------- ------- ------- ----------------- -------- -- --------- ------- ------------ ---- - ----------------- --------------- -
在这个例子中，我们在 _variables.scss 文件中使用 @import 导入了 _base.scss 文件，_variables.scss 中定义的 $secondary-color 变量可以在 main.scss 文件中使用，但是 _base.scss 中定义的 $primary-color 变量就不能在 main.scss 文件中使用了，因为我们没有在 main.scss 文件中使用 @import 导入 _base.scss 文件。
因此，建议在 SASS 文件中的最顶部使用 @import 导入其他文件，这样可以避免出现不必要的问题。
导入 CSS 文件
除了导入其他 SASS 文件，@import 还可以导入 CSS 文件。这样可以将一些第三方 CSS 库或者自己编写的 CSS 文件导入到 SASS 文件中，方便代码的管理。
例如，我们有一个名为 normalize.css 的 CSS 文件，我们可以在 SASS 文件中使用 @import 导入这个文件：
// main.scss
@import 'normalize.css';
body {
background-color: #fff;
}注意，在导入 CSS 文件时，必须使用完整的文件名（包括扩展名）。另外，导入的 CSS 文件中定义的样式并不会被 SASS 的编译器处理，因此需要注意样式的冲突问题。
@use
@use 是 SASS 3.0 中新增的语句，用来代替 @import。与 @import 不同的是，@use 可以更好地管理和控制导入的文件，并且可以避免出现命名冲突的问题。
基本使用
使用 @use 导入其他 SASS 文件也非常简单，只需要在当前文件中使用 @use 语句即可。例如，我们有一个名为 _variables.scss 的文件，其中定义了一些变量：
// _variables.scss $primary-color: #008CBA; $secondary-color: #006B9F;
我们可以在另一个 SASS 文件中使用 @use 来引入这些变量：
// main.scss
@use 'variables';
body {
background-color: variables.$primary-color;
}这样，我们就可以在 main.scss 文件中使用 _variables.scss 中定义的变量了。注意，在使用 @use 导入文件时，需要使用命名空间（namespace）来访问导入的文件中的变量、混合、函数等等。
命名空间
在使用 @use 导入文件时，可以使用命名空间来避免命名冲突。命名空间可以是任何有效的 SASS 标识符，它将作为一个前缀添加到导入的文件中定义的变量、混合、函数等等的名称前面。
例如，我们有一个名为 _buttons.scss 的文件，其中定义了一个名为 button 的混合：
-- -------------------- ---- ------- -- ------------- ------ ------ - -------- ------------- -------- ---- ----- ----------------- -------- ------ ----- ------- ----- -------------- ---- -
我们可以在另一个 SASS 文件中使用 @use 导入 _buttons.scss 文件，并且给它一个名为 buttons 的命名空间：
// main.scss
@use 'buttons' as buttons;
button {
@include buttons.button;
}这样，我们就可以在 main.scss 文件中使用 buttons.button 混合来调用 _buttons.scss 文件中定义的 button 混合了。使用命名空间可以避免命名冲突，同时也方便代码的管理和维护。
仅导入需要的内容
使用 @use 导入文件时，可以通过 @use 的 with 选项来仅导入需要的内容，从而减少编译后的文件大小。
例如，我们有一个名为 _buttons.scss 的文件，其中定义了一个名为 button 的混合和一个名为 link 的混合：
-- -------------------- ---- -------
-- -------------
------ ------ -
-------- -------------
-------- ---- -----
----------------- --------
------ -----
------- -----
-------------- ----
-
------ ---- -
------ --------
---------------- -----
------- -
---------------- ----------
-
-我们可以在另一个 SASS 文件中使用 @use 导入 _buttons.scss 文件，并且仅导入 button 混合：
// main.scss
@use 'buttons' with (
mixin: button
);
button {
@include button;
}这样，我们就只导入了 button 混合，可以减少编译后的文件大小。注意，使用 with 选项导入的内容需要使用命名空间来访问。
总结
在 SASS 中，@import 和 @use 都是非常实用的功能，可以将大型样式表拆分成多个文件，方便管理和维护。@use 是 SASS 3.0 中新增的语句，可以更好地管理和控制导入的文件，并且可以避免出现命名冲突的问题。在使用 @import 和 @use 导入文件时，需要注意导入顺序、命名空间的使用以及仅导入需要的内容等问题。希望本文可以帮助读者更好地理解和使用 @import 和 @use。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e3a5301886fbafa40038e1