在前端开发中，CSS 是一个必不可少的技能。而 SASS 是一种预处理器，它允许使用更高级、更灵活的语法来编写 CSS。使用 @import 关键字，可以在 SASS 代码中引入外部文件，方便我们管理 SASS 代码的结构。
@import 的格式
@import 关键字的语法格式如下：
------- -----------
其中，文件路径/文件名是需要引入的文件的路径和文件名。SASS 中可以使用绝对路径或相对路径，可以省略文件后缀名，当然也可以使用 URL 路径。
@import 的用途
样式库 / 第三方库
在 SASS 中，我们可以使用 @import 来引入第三方样式库，如 Bootstrap、Material Design 等。这些样式库通常包含很多预设样式，可以方便我们快速地构建页面。
-- -- --------- --- ------- ---------------------------
公共样式
另一个使用 @import 的应用是引入公共样式文件。在项目中，我们通常会把公共样式（如全局变量、全局 mixin 等）写在一个单独的文件中，以便于多个页面共用。通过使用 @import，我们可以轻松地把这些公共样式文件引入到其他 SASS 文件中。
-- -------- ------- ------------ -- ---- ----- -- ------- ---------
模块化开发
在大型项目中，一个 SASS 文件通常会包含很多样式规则。如果每个样式规则都写在同一个文件中，那么这个文件将变得非常庞大，难以管理和维护。
这时候，我们可以通过模块化开发的方式，把不同的样式规则写在不同的 SASS 文件中，然后使用 @import 把这些文件引入到主文件中。
-- -- ------ ---- ------- --------- -- -- ------ ---- ------- ---------
注意事项
文件路径
在使用 @import 导入文件时，需要注意文件路径的问题。如果文件路径不正确，会导致无法正常加载文件。推荐使用相对路径，以便于代码迁移和维护。
编译
SASS 文件需要先编译成 CSS 文件，然后再在 HTML 文件中引入 CSS 文件。如果在 HTML 文件中直接引用 SASS 文件，那么将无法正常显示样式。可以使用 Gulp、Webpack 等工具来进行 SASS 编译。
示例代码
样式库
-- -- --------- --- ------- ---------------------------
公共样式
-- -------- ------- ------------ -- ---- ----- -- ------- ---------
模块化开发
-- -- ------ ---- ------- --------- -- -- ------ ---- ------- ---------
总结
通过使用 @import 关键字，我们可以轻松地在 SASS 代码中导入外部文件，方便了代码的管理和维护。在实践中，我们可以引入样式库、公共样式文件，以及通过模块化开发的方式，把不同的样式规则写在不同的 SASS 文件中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64b0a12e48841e9894cb564e