在本章节中，我们将深入探讨 Stylus 中的 @import 指令。@import 是一种强大的工具，允许我们导入其他样式文件到当前文件中，这样可以将代码分解成更小、更易于管理的部分，同时保持代码的一致性和可维护性。
导入基本概念
使用 @import 可以让我们在一个 Stylus 文件中引用其他 Stylus 文件中的变量、混合宏和样式规则。这使得我们可以将大型项目拆分为多个小文件，每个文件负责一部分样式，然后通过 @import 将它们组合在一起。
// main.styl @import 'variables' @import 'mixins' @import 'reset' body font-size: $base-font-size color: $text-color
在这个例子中，main.styl 文件导入了三个其他文件：variables.styl、mixins.styl 和 reset.styl。这样做的好处是，我们可以单独修改每个导入的文件，而不会影响到其他部分的代码。
导入路径
默认情况下，Stylus 会在当前目录及其子目录下查找被导入的文件。你可以通过设置 paths 来指定额外的搜索路径，这样 Stylus 就可以在这些路径中查找需要导入的文件。
-- -------------------- ---- -------
-- -- ------- --- ------ ---
--- ------ - ------------------
-----------
---------------- ---------
------------- --------------------- ----------------
---------------- ----- ---- -
-- ----- ----- ----
-----------------
---在这个例子中，我们为 Stylus 设置了一个额外的搜索路径，这样它就可以在 stylesheets 目录下查找需要导入的文件。
导入时的文件扩展名处理
当你使用 @import 导入文件时，Stylus 会自动处理文件扩展名。这意味着你不需要显式地指定 .styl 扩展名。Stylus 会尝试找到与指定名称匹配的文件，并按以下顺序检查：
.styl.css.sss
如果找到了一个匹配的文件，Stylus 就会导入这个文件。例如：
// main.styl @import 'colors' // 如果存在 colors.styl 或 colors.css 或 colors.sss，都会被正确导入
这种机制使得导入文件更加灵活，同时也简化了文件名的书写。
导入时的别名处理
在导入文件时，你还可以给文件起一个别名，这样在当前文件中就可以通过这个别名来引用导入文件中的内容。这对于避免命名冲突非常有用。
// main.styl @import 'colors' as c body background-color: c.$background-color
在这个例子中，我们给 colors.styl 文件起了一个别名 c，这样在当前文件中就可以通过 c.$background-color 来访问 colors.styl 中定义的 $background-color 变量。
导入时的条件处理
有时候，你可能希望根据某些条件来决定是否导入某个文件。Stylus 提供了一种方式来实现这一点，那就是通过条件语句来控制 @import 的执行。
// main.styl $theme = 'dark' if $theme == 'dark' @import 'dark-theme' else @import 'light-theme'
在这个例子中，我们根据变量 $theme 的值来决定导入哪个主题文件。这种方式使得你的样式可以根据不同的环境或用户偏好进行动态调整。
总结
通过使用 @import，我们可以有效地组织和管理 Stylus 项目中的样式文件。它不仅提高了代码的可读性和可维护性，还使得项目结构更加清晰。通过理解如何使用路径、别名和条件导入等特性，我们可以更好地利用 @import 的功能来优化我们的前端开发工作流程。