Loops make Less to run out of memory. (Structure optimization)

Question

I'm working on a less project, but as is start to become a bit big, every time that i'm trying to compile i run out of memory.

This is my current structure:

style.less

colors.less

icons.less

styles

style1

style2

style3

Now,

colors.less is a list of colors and their classes

icons.less a list of icons and their classes

style.less is the main file, where all is included and compiled

styles is a folder containing all the difference for every different style

my question (well, actually is more a suggestion than a question) is:

how can i optimize this structure so that i don't run out of memory anymore when trying to compile?

The process is the following:

colors.less and icons.less contains my arrays with color, icons and classes, nothing more.

I have both colors.less and icons.less included into style1.less,style2.less,style3.less, where i create a loop trough the colors.

Finally, i'll import everything into style.less (the main one) where i create a loop trough the icons and then add all the MIXINS to create the final result. the problem is that i can't compile as i run out of memory.

I'm pretty sure that there's something wrong on my structure or any way i can increase the memory (i'm compile using brunch -> this link for official website)

Any suggestion are really really appreciated.

Thanks a lot.

PS: for more information, just ask.

It's barely possible to suggest anything w/o knowing what exactly you're trying to compile... How can we know if it's really something big to fail to compile within your environment or it's just simply some infinite loop? — seven-phases-max, Oct 18 '14 at 00:21
can you suggest a place where i can actually upload my files and then share a link so that they are available for you to check? — Nick, Oct 18 '14 at 00:22
Hmm, indeed it seems like it's just too big. Well, honestly I can't suggest anything specific that could help apart from removing [unused vars](https://github.com/nickimola/test/blob/master/app/less/style.less#L17) and moving duplicated properties into separate classes (e.g. like FontAwesome does). Two generic ideas though: first, you could try to compile each styles separately and then concatenate resulting CSS. Second: there's way to get rid of loops at all (obviously it's the loops who eat memory because of recursion), see for example http://stackoverflow.com/a/25877100 (the last snippet). — seven-phases-max, Oct 18 '14 at 01:13

seven-phases-max · Accepted Answer · 2015-03-29T17:33:46.323

A partial answer, there's way to get rid of loops: color and icon data can be defined as mixins calls, here's mini example:

.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.
        }
    }
}

Same for icons...

Loops make Less to run out of memory. (Structure optimization)

1 Answers1

Linked