在Sass（Syntactically Awesome Stylesheets）中，@import 指令用于将其他 Sass 文件的内容导入到当前 Sass 文件中。这个特性使得开发者能够将样式拆分成多个模块化的文件，从而更方便地组织、维护和复用代码。
使用方法
@import 指令的基本语法如下：
@import 'filename';
其中 'filename' 是你想要导入的 Sass 文件名（可以省略文件扩展名 .scss，Sass 会自动添加并查找）。
示例
假设你有以下两个 Sass 文件：
_variables.scss
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;
main.scss
@import 'variables';body {font: 100% $font-stack;color: $primary-color;
}
在这个例子中，main.scss 文件通过 @import 'variables'; 导入了 _variables.scss 文件中的变量。在编译后的 CSS 中，$primary-color 和 $font-stack 会被正确地应用到 body 选择器中。
注意事项
-
部分文件名：
- 导入的文件名通常以
_开头（例如_variables.scss），这是一种约定俗成的做法，表示这些文件是部分文件（partials），仅用于导入，不会单独编译成 CSS 文件。
- 导入的文件名通常以
-
路径：
- 如果导入的文件不在同一目录下，你需要提供相对路径或绝对路径。
-
避免重复导入：
- Sass 会智能地处理重复导入的情况，即使你在多个文件中多次导入同一个部分文件，它也只会在最终的 CSS 中包含一次。
-
导入顺序：
- 导入的顺序很重要，因为 Sass 会按照你导入的顺序来解析和合并样式。
-
CSS 文件导入：
- 你也可以使用
@import来导入 CSS 文件，但需要注意的是，这样做会导致编译后的 CSS 文件包含@import语句，而不是将 CSS 文件的内容直接合并进来。这在性能上可能不如直接使用 Sass 文件导入。
- 你也可以使用
Sass Modules 和 @use
在 Sass 的新版本（Dart Sass 和 Node Sass 的较新版本）中，推荐使用 @use 和 @forward 指令来替代 @import，因为它们提供了更好的模块化和作用域管理。然而，在旧项目中，@import 仍然是一个常用且有效的工具。
总结来说，@import 在 Sass 中是一个非常有用的指令，它使得样式代码的组织和复用变得更加容易和高效。
