循环使 Less 耗尽内存。（结构优化）答案

【问题标题】：Loops make Less to run out of memory. (Structure optimization)循环使 Less 耗尽内存。（结构优化）
【发布时间】：2014-12-13 15:05:58
【问题描述】：

我正在做一个较少的项目，但由于它开始变得有点大，每次我尝试编译时都会耗尽内存。

这是我目前的结构：

style.less

colors.less

icons.less

款式

风格1

风格2

风格3

现在，

colors.less 是颜色及其类的列表

icons.less 图标及其类的列表

style.less 是主文件，所有内容都包含在内并编译

styles 是一个文件夹，其中包含每种不同样式的所有差异

我的问题（嗯，实际上更像是一个建议而不是一个问题）是：

如何优化此结构，以免内存不足尝试编译时不再？

流程如下：

colors.less 和 icons.less 包含我的数组，包括颜色、图标和类，仅此而已。

我将colors.less 和icons.less 都包含在style1.less,style2.less,style3.less 中，在那里我通过颜色创建了一个循环。

最后，我将所有内容导入到 style.less（主要）中，在其中我通过图标创建一个循环，然后添加所有 MIXINS 以创建最终结果。问题是我内存不足无法编译。

我很确定我的结构有问题或者我可以增加内存的任何方式（我正在使用 brunch 编译 -> this link for official website）

非常感谢任何建议。

非常感谢。

PS：欲了解更多信息，请询问。

【问题讨论】：

几乎不可能在不知道您要编译的确切内容的情况下提出任何建议...我们如何知道在您的环境中编译失败是否真的是一件大事，或者只是一些无限循环？
你能推荐一个我可以实际上传文件的地方，然后分享一个链接，以便你检查吗？
GitHub?
github.com/nickimola/test 你在这里
嗯，确实好像太大了。好吧，老实说，除了删除 unused vars 并将重复的属性移动到单独的类中（例如，像 FontAwesome 那样）之外，我无法提出任何具体的建议。但是有两个通用的想法：首先，您可以尝试分别编译每种样式，然后连接生成的 CSS。第二：有办法完全摆脱循环（显然是循环因为递归而吃掉内存），例如见stackoverflow.com/a/25877100（最后一个sn-p）。

标签： css less brunch

【解决方案1】：

部分答案，有办法摆脱循环：颜色和图标数据可以定义为 mixins 调用，这是一个小例子：

.colors() {
    // "array" of colors
    .-(Maroon, #800000);
    .-(Red,    #FF0000);
    .-(Orange, #FFA500);
    .-(Yellow, #FFFF00);
}

// generate color classes:

.some-prefix {
    .colors();
    .-(@name, @color) {
        &.@{name} {
            color: contrast(@color);
            background: @color;
            // etc.
        }
    }
}

图标也一样...

【讨论】：