SASS 是一种 CSS 预处理器语言，它引入了许多有用的特性，使得 CSS 代码更加易于管理和维护。其中，@import 语句是一种非常重要的特性，它可以帮助我们组织和重用代码。
@import 语句的基本用法
@import 语句可以将一个 SASS 文件导入到另一个 SASS 文件中。在被导入的 SASS 文件中，可以定义变量、混合器、函数等，然后在导入它的 SASS 文件中使用这些定义。
基本的 @import 语句用法如下：
@import "filename";
这样就可以将 filename.scss 文件导入到当前的 SASS 文件中。
@import 语句的高级用法
@import 语句还有一些高级用法，可以更好地组织和重用代码。
导入多个文件
可以使用逗号分隔符一次导入多个文件：
@import "variables", "mixins", "helpers";
这样就可以将 variables.scss、mixins.scss、helpers.scss 这三个文件一次性导入到当前的 SASS 文件中。
导入整个目录
可以使用 @import 语句导入整个目录下的所有文件：
@import "partials/*";
这样就可以将 partials 目录下的所有 SASS 文件导入到当前的 SASS 文件中。注意，导入的顺序是按照字母顺序排序的。
引入 CSS 文件
如果想要在 SASS 文件中引入一个普通的 CSS 文件，可以使用如下的语法：
@import "bootstrap.css";
这样可以将 bootstrap.css 文件导入到当前的 SASS 文件中，然后在其中使用它定义的样式。
控制文件的编译顺序
有时候，导入的文件之间存在依赖关系，而这种依赖关系可能导致编译出错。为了解决这个问题，可以在 @import 语句中使用关键字 from 指定文件的相对路径：
@import "variables" from "./components/buttons";
这样就可以将 variables.scss 文件导入到 ./components/buttons 文件夹中，并且在编译时，先编译 variables.scss 文件，再编译 ./components/buttons 文件夹中的其他文件。
示例代码
下面是一个示例，它将使用 @import 语句导入多个文件，并且在编译时控制了它们的顺序：
-- -------------------- ---- ------- -- -------------- ------- ----------- ---- ----------- ------- --------- --------- ---- ---------- -- -------- ---- - ------------ ------------- -------- ------------ - ---- ----------------- -
// 文件名：variables.scss $font-family: sans-serif;
// 文件名：mixins.scss
@mixin box-shadow($shadow) {
box-shadow: $shadow;
-webkit-box-shadow: $shadow;
}// 文件名：helpers.scss // 可以在这里定义一些有用的函数
在编译时，SASS 会按照如下的顺序进行编译：
- 先编译 variables.scss 文件，定义了 $font-family 变量；
- 再编译 mixins.scss 和 helpers.scss 文件，定义了 @mixin box-shadow() 混合器；
- 最后编译 style.scss 文件，使用了 $font-family 变量和 box-shadow() 混合器。
总结
@import 语句是 SASS 中的一个非常有用的特性，可以帮助我们更好地组织和重用代码。在使用 @import 语句时，可以采用多种高级用法，比如导入多个文件、导入整个目录、引入 CSS 文件等等，这些用法可以提高代码的可读性、可维护性和可扩展性。对于 SASS 初学者来说，掌握 @import 语句的用法是非常重要的，可以使得他们更快地掌握 SASS 的开发技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6480814b48841e9894ff2507