SASS 是一种在 CSS 的基础上增加了许多功能和特性的预处理器，其中的 @import 指令是用于导入其他 SCSS/SASS 文件的一种功能强大的方式。在编写复杂的项目时，使用 @import 可以帮助我们组织和管理样式文件，提高代码的可维护性和可读性。
基础用法
@import 可以通过以下两种方式在 SASS 中使用：
导入单个文件
语法：
@import '文件路径'
示例：
@import 'base';
这将导入名为 base.scss 或 base.sass 文件的内容，路径可以是相对于当前文件的相对路径或者是绝对路径。
导入多个文件
语法：
@import '文件路径1', '文件路径2', ...
示例：
@import 'base', 'variables', 'mixins';
这将按顺序导入 base、variables 和 mixins 这三个文件的内容，多个路径之间用逗号分隔。
注意事项
在使用 @import 时需要注意以下事项：
文件扩展名
SASS 支持两种文件格式：.scss 和 .sass。如果文件扩展名为 .scss，则使用 @import 导入时也需要加上扩展名，而如果文件扩展名为 .sass，则可以省略扩展名。
不要省略单引号
@import 中的文件路径需要用单引号括起来，不能使用双引号或不加引号的方式。如果省略了单引号或使用了双引号，则会出现错误。
避免循环导入
如果 A 文件导入了 B 文件，而 B 文件又导入了 A 文件，就会出现循环导入的情况。这种情况会导致编译出错或者进入死循环，因此需要避免。
实战应用
下面是一个简单的示例，演示了如何在 SASS 中使用 @import 导入其他文件中的变量和混合器：
variables.scss
$primary-color: blue;
mixins.scss
-- -------------------- ---- ------- ------ ----------------- - -------- ------------- ----------------- ---------- ------ ----- -------- ---- ----- ------- ----- -------------- ---- ------- -------- -
main.scss
@import 'variables'; @import 'mixins'; .btn { @include button($primary-color); }
在主文件 main.scss 中，我们通过 @import 导入了 variables.scss 和 mixins.scss 文件，然后使用了其中定义的变量和混合器。这样可以避免将所有的样式都写在一个文件中，使代码更加清晰和模块化。
总结
在 SASS 中使用 @import 导入其他文件可以帮助我们更好地组织和管理样式文件，提高代码的可维护性和可读性。在使用时需要注意文件扩展名、引号的使用和循环导入等问题，同时掌握基础和实战的用法，能够更好地利用这个功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ded0f9f6b2d6eab39f2128