Sass 是一种强化了 CSS 的语言，可以大幅提升样式编写效率和可维护性。其中的 @import 命令可以引入其他 Sass 文件，方便管理和组织样式。然而，在使用 @import 命令时，有一些注意事项需要注意，本文将详细介绍。
- 避免重复引用
在 Sass 中，使用 @import 可以将其他 Sass 文件引入到当前文件中。由于 Sass 能够嵌套样式，这就带来了一个问题：如果在引入文件中也使用了 @import 命令，并且相互之间引用了同一个文件，那么该文件将会被重复引用多次，导致样式文件变得冗长，浏览器加载时间变慢。因此，在使用 @import 命令时，务必要避免重复引用。
示例代码：
// base.scss $font-size: 16px; body { font-size: $font-size; }
// main.scss @import 'base'; // base.scss 被引入
// other.scss @import 'base'; // base.scss 被重复引入
- 引用路径的注意事项
在 Sass 中，使用 @import 命令引入文件时，文件路径是相对于当前文件的路径。如果在编写 Sass 文件时，文件结构不清晰，可能会导致引用路径错误，而引入失败。
解决方法1：绝对路径
在使用 @import 命令时，可以直接使用文件的绝对路径来引用。
示例代码：
// main.scss 引入 base.scss @import '/sass/components/base';
解决方法2：使用 ~ 符号
在 Sass 中，使用 ~ 符号可以表示从 npm 包中引入文件。
示例代码：
// 引入 fontawesome @import "~@fortawesome/fontawesome-free/scss/fontawesome";
但是 ~ 符号只能用于文件名，不能用于文件夹。
- 顺序的影响
在 Sass 中，@import 命令是按照引入顺序进行解析的，所以引入的文件顺序对最终样式可能会产生影响。
示例代码：
// base.scss $color: #333; body { color: $color; }
// main.scss @import 'base'; $color: red; body { background-color: $color; }
// 渲染后的 CSS body { color: #333; // 注意此处 background-color: red; }
在上例中，由于 base.scss 先被引入，所以 $color: red 语句并没有覆盖 base 文件中定义的 $color 变量。
- 引用文件的细节
在 Sass 中，引入文件时还有一些细节需要注意。
4.1 不需要后缀
在使用 @import 命令时，不需要在文件名后面加上 .scss 后缀名。
示例代码：
// main.scss @import 'base'; // 正确
@import 'base.scss'; // 错误，不需要后缀
4.2 文件名/路径区分大小写
在引用文件时，文件名/路径区分大小写。因此，在编写 Sass 代码时，要特别注意文件名及路径的大小写。
示例代码：
// main.scss @import 'Base'; // 错误，文件名大小写不一致
@import 'components/base'; // 错误，路径大小写不一致
- 总结
以上就是 SASS 中使用 @import 的注意事项。当我们合理使用 @import 命令时，能够更加方便地管理和组织样式文件，提高工作效率和代码可维护性。希望本文能够帮助您更加深入了解 Sass 的使用技巧，提高前端开发水平和工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64edf0fff6b2d6eab380fd82