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

Question

我反复做的一件事是，每次我将网页添加到我网站的某个部分时，都有自己的样式（位于.styl文件中），我必须回到我的{ {1}}并添加main.styl语句。

如果我只有一个布局，我只需导入单个@import文件的整个目录，但我经常使用移动和桌面，或标准和最小布局，这将是相关的能够仅在相应的.styl文件中包含相关的@import（在我的情况下为main.styl和standard.styl）。

是否有人告诉minimal.styl文件其内容应该包含在其他.styl个文件中？

Answer 1

“反向导入”，即使用指令表示应该在另一个文件中导入特定文件，Sass或Less都不支持。

“全局导入”也不是本机支持的。但是，对于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

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

但是，在我看来，通过对每个变体使用媒体查询来处理所有这些事情往往更容易，但也许你有一个他们不适合的环境？那么条件的这种分裂应该是完美的。