什么是 SASS？
SASS 是一种 CSS 预处理器，它可以在原有 CSS 的基础上增加一些扩展功能，比如变量、嵌套规则、函数、混合等等。使用 SASS 可以提高 CSS 代码的可维护性、可读性和可扩展性。
为什么要引入外部文件？
在实际项目开发中，CSS 文件往往很大，而且随着项目的不断扩大，CSS 文件的大小也会不断增加。如果在一个文件中写所有的 CSS 样式，那么这个文件的代码量将非常庞大，而且对于团队协作和代码维护来说也非常困难。因此，我们往往会把 CSS 样式分成多个文件，然后通过一些方式整合成一个文件，这样可以让代码更加清晰、易于维护。
SASS 中的 @import 指令
SASS 中提供了一个 @import 指令，可以用来引入其他的 SASS 文件。这样，在一个 SASS 文件中可以引用其他的 SASS 文件中的样式规则。使用 @import 指令可以将多个样式文件整合成一个文件，方便管理。
@import 指令的语法格式如下：
@import 'filename';
其中，filename 是要引入的 SASS 文件的文件名，可以是相对路径或者绝对路径。需要注意的是，文件名后面不需要加 .sass 或 .scss 扩展名。
示例
假设我们有一个样式文件 main.scss，它包含了一些样式规则：
-- -------------------- ---- -------
--------------- --------
---- -
----------------- ---------------
-
--- --- --- --- --- -- -
------ ---------------
-
------ -
----------------- ---------------
------- -----
-------------- ----
------ -----
------- --------
-------- --- -----
-
- -
------ ---------------
---------------- -----
------- -
---------------- ----------
-
-现在，我们将这个文件拆分成两个文件，一个是 variables.scss，另一个是 main.scss。其中 variables.scss 包含了一些变量定义：
$primary-color: #007bff; $danger-color: #dc3545; $warning-color: #ffc107; $info-color: #17a2b8; $light-color: #f8f9fa; $dark-color: #343a40;
而 main.scss 文件中则只包含了样式规则：
-- -------------------- ---- -------
------- ------------
---- -
----------------- ---------------
-
--- --- --- --- --- -- -
------ ---------------
-
------ -
----------------- ---------------
------- -----
-------------- ----
------ -----
------- --------
-------- --- -----
-
- -
------ --------------
---------------- -----
------- -
---------------- ----------
-
-这样，在编译 CSS 文件的时候，只需要编译 main.scss 文件就可以了，SASS 会自动把 variables.scss 文件中的变量引入到 main.scss 中。
总结
通过使用 @import 指令，可以方便地将多个 SASS 文件整合成一个文件，方便代码管理和维护。要使用 @import 指令，只需要在需要引入其他文件的地方，使用 @import 'filename'; 即可。需要注意的是，文件名后面不需要加 .sass 或 .scss 扩展名。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec0d45f6b2d6eab3659307