更少的 CSS 导入结构

【问题标题】：Less CSS import structure更少的 CSS 导入结构
【发布时间】：2012-03-07 23:28:27
【问题描述】：

我有一个非常大的 .less 文件，为了便于阅读，我正在尝试将其拆分为更小的文件。

但是我正在导入的文件依赖于 main.less 文件中的变量和 mixin...所以它们不会自行编译。

我应该只在两个文件的顶部包含变量和混合，还是有更好的方法来解决这个问题？

【问题讨论】：

标签： css less

【解决方案1】：

如果将变量包含在 main.less 文件中，则不需要在每个文件中包含变量。

/* main.less */
@import mixins.less
@import one.less
@import two.less

假设您只在您的站点中加载main.less，当您处理one 或two 时，来自mixins 的变量应该可以正常工作，因为所有内容都将被编译成main.less。

【讨论】：

【解决方案2】：

如果变量和 mixins 独立于其他样式（它们可能应该如此），您可以为变量和 mixins 创建单独的文件...

- less_directory
  |-- mixins.less
  |-- variables.less
  |-- style1.less
  `-- style2.less

..然后根据需要 import 他们。

【讨论】：

这不是最好的方法（因为你在重复自己），这也不是 bootstrap 采用的方法。最好使用一个 main.less 文件作为唯一一个编译成 css 的文件，并在那里导入所有内容（如另一个答案中所述）