如何将一个LESS样式表模块化为多个样式表？

Question

我希望把我的styles.less文件（目前包含3000行样式代码用于我的整个网站）并将其拆分为多个样式表，即navigation.less，buttons.less，footer.less等。

我想我会将所有这些单独的样式表@import转换为主样式表，例如all.less，它将编译/缩小为all.css

我将这种样式分解为单个工作表时遇到的一个问题是变量引用被破坏了。因此，例如，如果我将我的按钮CSS移植到buttons.less，我的按钮CSS包含对styles.less中定义的LESS变量的引用。我该如何解决这个问题？

使用LESS模块化我的CSS代码是否有更好的方法？对于一个文件，3000行LESS代码变得完全无法管理，我需要将其分解。

Answer 1

大多数人通过拥有两个特定文件来处理此问题，例如variables.less和mixins.less。

然后，如果模块中需要这些，则使用import-once而不是import（for versions prior to the at present upcoming 1.4; at which time import by default will act as import-once）。您可以在 模块文件和all.less中使用此功能。这样，当它们全部集中在all.less文件中时，导入仅在最终文件的顶部出现一次，而不是对于加载的每个单独模块文件。