使用 @import 关键字来导入外部文件-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，CSS 是一个必不可少的技能。而 SASS 是一种预处理器，它允许使用更高级、更灵活的语法来编写 CSS。使用 @import 关键字，可以在 SASS 代码中引入外部文件，方便我们管理 SASS 代码的结构。

@import 的格式

@import 关键字的语法格式如下：

@import "文件路径/文件名";

其中，文件路径/文件名是需要引入的文件的路径和文件名。SASS 中可以使用绝对路径或相对路径，可以省略文件后缀名，当然也可以使用 URL 路径。

在 SASS 中，我们可以使用 @import 来引入第三方样式库，如 Bootstrap、Material Design 等。这些样式库通常包含很多预设样式，可以方便我们快速地构建页面。

// 引入 Bootstrap 样式库
@import "bootstrap/scss/bootstrap";

另一个使用 @import 的应用是引入公共样式文件。在项目中，我们通常会把公共样式（如全局变量、全局 mixin 等）写在一个单独的文件中，以便于多个页面共用。通过使用 @import，我们可以轻松地把这些公共样式文件引入到其他 SASS 文件中。

// 引入全局变量文件
@import "variables";

// 引入全局 mixin 文件
@import "mixins";

在大型项目中，一个 SASS 文件通常会包含很多样式规则。如果每个样式规则都写在同一个文件中，那么这个文件将变得非常庞大，难以管理和维护。

这时候，我们可以通过模块化开发的方式，把不同的样式规则写在不同的 SASS 文件中，然后使用 @import 把这些文件引入到主文件中。

// 引入 header 样式文件
@import "header";

// 引入 footer 样式文件
@import "footer";

在使用 @import 导入文件时，需要注意文件路径的问题。如果文件路径不正确，会导致无法正常加载文件。推荐使用相对路径，以便于代码迁移和维护。

SASS 文件需要先编译成 CSS 文件，然后再在 HTML 文件中引入 CSS 文件。如果在 HTML 文件中直接引用 SASS 文件，那么将无法正常显示样式。可以使用 Gulp、Webpack 等工具来进行 SASS 编译。

// 引入 Bootstrap 样式库
@import "bootstrap/scss/bootstrap";

// 引入全局变量文件
@import "variables";

// 引入全局 mixin 文件
@import "mixins";

// 引入 header 样式文件
@import "header";

// 引入 footer 样式文件
@import "footer";

通过使用 @import 关键字，我们可以轻松地在 SASS 代码中导入外部文件，方便了代码的管理和维护。在实践中，我们可以引入样式库、公共样式文件，以及通过模块化开发的方式，把不同的样式规则写在不同的 SASS 文件中。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64b0a12e48841e9894cb564e