我可以在手写笔中执行 @import 的反向操作吗？

Question

我反复做的一件事是，每次我将一个页面添加到我网站的某个部分时，它有自己的样式（驻留在 .styl 文件中），我必须返回到我的 main.styl 并添加一个 @import 语句。

如果我只有一个布局，我会简单地导入单个 .styl 文件的整个目录，但我经常使用移动和桌面，或者标准和最小布局，这将是相关的能够在适当的 main.styl 文件中仅包含相关的 @import（在我的例子中是 standard.styl 和 minimal.styl）。

是否可以告诉 .styl 文件它的内容应该包含在其他 .styl 文件中？

Answer 1

"reverse import"，也就是说，Sass 或 Less 都不支持使用指令说明特定文件应导入另一个文件。

"Glob importing" 也不受任何一个原生支持。然而，对于 Less，这已作为插件实现：https://github.com/just-boris/less-plugin-glob.

Answer 2

Stylus（或我知道的其他预处理器）中没有这样的功能，但您可以通过使用条件和变量来绕过它。对于 Stylus，这可能看起来像这样：

// standard.styl

$context = 'standard'
@import 'lib/*.styl'

和

// minimal.styl

$context = 'minimal'
@import 'lib/*.styl'

然后您可以通过将所有内容包装在条件中来编写任何包含的文件：

// myBlock.styl

if $context == 'standard'
  .myBlock
    display: block

您甚至可以在一个文件甚至一个块中混合使用不同的上下文。

但是，在我看来，通过对每个变体使用媒体查询通常更容易处理所有这些事情，但也许您的环境不适合它们？那么这种按条件拆分应该可以完美地工作。

Can I do the reverse of @import in stylus?