前言
在前端开发中，我们经常会使用 Sass 来进行 CSS 的预处理。在 Sass 中，@import 是一个非常常用的指令，可以将多个 Sass 文件合并成一个 CSS 文件。但是，@import 也有一些性能问题需要注意，这篇文章就来详细介绍一下。
@import 的基本用法
在 Sass 中，@import 的语法如下：
@import 'filename';
其中 filename 指的是要导入的 Sass 文件的名称。导入时可以省略 .scss 扩展名。
@import 的性能问题
在使用 @import 导入 Sass 文件时，Sass 会将被导入的文件的内容直接插入到当前 Sass 文件中，然后再进行编译。这意味着，如果我们在一个 Sass 文件中多次使用 @import 导入不同的文件，那么这些文件的内容都会被插入到当前 Sass 文件中，这会导致生成的 CSS 文件变得非常大，加载时间也会变长。
为了避免这种性能问题，在使用 @import 时，我们可以采用以下两种方式：
1. 使用 Partials
Partials 是指 Sass 中名称以 _ 开头的 Sass 文件。这种文件在编译时不会生成对应的 CSS 文件，而是被其他 Sass 文件导入使用。
我们可以将一些公共的 Sass 样式代码放在一个 Partial 文件中，然后在需要使用这些样式的 Sass 文件中导入这个 Partial 文件。这样可以避免将同样的代码重复导入多次，提高性能。
例如，我们有一个名为_variables.scss 的 Partial 文件，用来存放一些通用的变量和配置信息，内容如下：
// _variables.scss $primary-color: #3498db; $secondary-color: #f1c40f; // ...
然后我们在需要使用这些变量的 Sass 文件中导入这个 Partial 文件：
// main.scss
@import 'variables';
body {
background-color: $primary-color;
}2. 使用 Sass 的 loadPaths 选项
loadPaths 是 Sass 的一个配置选项，用来指定 Sass 的自定义导入路径。通常情况下，Sass 只会在当前 Sass 文件所在目录和 includePaths 中指定的目录中查找被导入的文件。但如果我们将文件存放在其他目录中，我们可以使用 loadPaths 选项来告诉 Sass 去查找这些文件。
例如，我们将一些通用的 Sass 样式代码存放在项目的 src 目录下，然后使用 loadPaths 选项告诉 Sass 去查找这些文件：
-- -------------------- ---- ------- ----- ---- - ---------------- ------------- ----- ----------------------- ------------ ------------- ---------- --------------- -- ----- ------- -- - -- ----- ----- ---- ------------------------ ---
这样，在 main.scss 中导入 src/styles 目录下的 Sass 文件时，就不需要使用相对路径了：
@import 'variables';
body {
background-color: $primary-color;
}@import 的调用方式
在 Sass 中，@import 有两种调用方式：普通方式和 url() 函数方式。
1. 普通方式
普通方式即为前面介绍的方式，只需要在 @import 后面跟上被导入文件的名称即可。
@import 'variables';
2. url() 函数方式
如果要在 CSS 中使用 @import 导入外部 CSS 文件，可以使用 url() 函数方式。这种方式类似于 HTML 中的 link 标签，用来引入外部 CSS 文件。
@import url('https://fonts.googleapis.com/css?family=Roboto');需要注意的是，使用 url() 函数方式导入的外部文件不会被 Sass 编译，而是直接输出到生成的 CSS 文件中。
总结
@import 是 Sass 中一个高效的文件合并工具，但在使用时需要注意性能问题。我们可以使用 Partials 或 loadPaths 选项来避免重复导入代码，提高性能。此外，@import 还有 url() 函数方式，用来导入外部 CSS 文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6464cbeb968c7c53b05a6406