Sass 中使用 @import 导入 CSS 文件的好处
CSS 是网页设计中不可或缺的一部分，但是 CSS 文件的管理和维护却是一件比较繁琐的事情。为了解决这个问题，Sass 中提供了 @import 指令，可以将多个 CSS 文件合并成一个文件，从而简化了 CSS 文件的管理和维护。
@import 指令的好处有以下几点：
- 可以减少 HTTP 请求
在网站的开发过程中，我们通常会将 CSS 文件拆分成多个文件来进行管理，但是这样会导致网页加载时需要多次请求 CSS 文件，影响网页的加载速度。使用 @import 指令可以将多个 CSS 文件合并成一个文件，从而减少了 HTTP 请求，提高了网页的加载速度。
- 可以提高代码的可读性和维护性
在使用 @import 指令时，我们可以将不同功能的 CSS 样式分别写在不同的文件中，这样可以提高代码的可读性和维护性。当我们需要修改某个样式时，只需要打开相应的文件进行修改即可，不需要在一个庞大的 CSS 文件中查找和修改。
- 可以使用 Sass 的特性
在使用 @import 指令时，我们可以使用 Sass 的特性，例如变量、嵌套、混合等。这些特性可以让我们更加方便地编写 CSS 样式，提高了开发效率。
下面是一个使用 @import 指令的示例代码：
// _base.scss 文件 $font-size: 16px; $font-color: #333;
body { font-size: $font-size; color: $font-color; }
// _header.scss 文件 .header { font-size: $font-size; color: $font-color; }
// main.scss 文件 @import "base"; @import "header";
在上面的示例代码中，我们将基础样式和头部样式分别写在了 _base.scss 和 _header.scss 文件中，然后在 main.scss 文件中使用 @import 指令将两个文件合并成一个文件。这样可以让我们更加方便地管理和维护 CSS 样式。
总结
使用 @import 指令可以让我们更加方便地管理和维护 CSS 样式，减少 HTTP 请求，提高网页的加载速度，并且可以使用 Sass 的特性。因此，在进行前端开发时，建议使用 @import 指令来管理 CSS 样式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65509fec7d4982a6eb967ea3