Sass 是一种强大的 CSS 预处理器，它可以让前端开发更加高效和方便。在 Sass 中，我们可以使用 @import 来导入其他 Sass 文件，并实现模块化开发。
@import 基本使用
@import 可以用于导入 Sass 和 CSS 文件，使用方法和 CSS 中的 @import 基本相同。我们可以使用相对路径或绝对路径来引入文件，比如：
@import 'style.scss'; @import '../common.scss';
这里我们使用了一个相对路径和一个相对路径+父级路径来引入两个不同的 Sass 文件。注意，不同于 CSS 中的 @import，Sass 中的 @import 不会导致额外的 HTTP 请求，因为它是在编译时处理的。
@import 的实现原理
当 Sass 编译器在处理一个 Sass 文件时，如果发现了其中的 @import 语句，它会将导入的文件内容插入到当前文件中，然后再一起编译成最终的 CSS 文件。因此，我们可以在主 Sass 文件中只导入需要的模块，而不必担心编译后文件大小的问题。
模块化开发
通过 @import，我们可以轻松实现模块化开发，将样式分成多个文件，然后在主文件中导入它们。这样做有以下几个优点：
增强可维护性。我们可以将不同的样式分成多个小文件，便于修改和维护。
提高代码复用性。我们可以将一些公共的样式抽离成为一个单独的文件，然后在其他文件中重复引用。
降低耦合度。我们可以在需要的文件中引入所需的模块，而不必将所有样式都写在同一个文件中，增加了代码的可读性和可维护性。
下面是一个简单的示例，我们可以将样式分为 base、layout 和 module 三个文件：
-- -------------------- ---- ------- -- --------- ----------- ----- --------------- -------- ---- - ---------- ----------- ------ --------------- - -- ----------- ---------- - ---------- ------- ------- - ----- - -- ----------- ---- - -------- ---- ----- ----------------- --------------- ------- ----- -------------- ---- ------ ----- ------- -------- -
然后在 main.scss 中导入这三个文件：
@import 'base'; @import 'layout'; @import 'module'; /* 其他样式 */
这样，我们就实现了样式的模块化开发。
总结
Sass 的 @import 功能可以帮助我们实现样式表的模块化开发。通过将样式分成多个小文件并使用 @import 导入，我们能够增强可维护性、提高代码复用性和降低耦合度。因此，在开发大型项目或团队协作时，使用 Sass 进行模块化开发是非常值得推荐的。
参考链接
Sass 官方文档：https://sass-lang.com/documentation/at-rules/import
Sass 和模块化开发：https://www.sitepoint.com/sass-modular-css-part-1/
CSS 模块化开发指南：https://www.cnblogs.com/ranyonsue/p/5891277.html
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476eb12968c7c53b0384445