css - 将 .kit 文件(变量)导入 .kit 文件(css)

Question

我正在使用 .kit 文件来保存变量，以便轻松更改为模板。将 .kit 文件导入我的 index.html 文件没有问题，但为了让变量也能在我的 css 文件中工作，我必须将它也导入那里，这似乎打破了第一个声明。

<!-- @import "../include/variables.kit"-->

.alt-section {
  background: <!--$bgcolor-->;
}

我在想这一定与注释如何与 css 文件一起工作有关，但我不确定如何解决这个问题。我想过加一个“;”导入后添加到我的代码中，使代码认为这是一个新的声明，但这没有用，所以现在我不得不加倍处理代码，例如:

<!-- @import "../include/variables.kit"-->

  .alt-section {
    background-color: <!--$bgcolor-->;
  }
  .alt-section {
    background-color: <!--$bgcolor-->;
  }

有没有更好的方法来解决这个问题？另外，有没有办法不必将文件导入到我需要使用变量的每个 .kit 文件中？我注意到如果我不导入，它就不会正确编译。 (我没有使用 SASS)

Answer 1

我发现插入到 css 文档中的 import 标签被包含在第一个声明中，因为它没有尽头，并且它就像声明的一部分一样。我只是将 css 注释标签放在导入本身上，这允许变量仍然插入到工具包文件中，但没有“显示”导入标签本身，因此不会破坏其余代码。它最终看起来像:

/*<!-- @import "../include/variables.kit"-->*/

  .alt-section {
   background-color: <!--$bgcolor-->;
 }

这解决了我在将变量导入到每个需要变量的文件中时遇到的任何问题。