Question

I’m try to compile this .less code to .css via lessphp and get this error:

Fatal Error:
====================
infinite loop detected: @pos-x: failed at `background-position: @pos-x 0; }` line: 3

Here is my code.

@pos-x : 0;
@w : 30px;
.a { background-position: @pos-x 0; }

@pos-x: @pos-x - @w;
.b { background-position: @pos-x 0; }

What’s wrong with it? Can i use varable overriding in LESS?

Answer 1

@pos-x: @pos-x - @w; is not allowed. The documentation states, “Note that variables in LESS are actually ‘constants’ in that they can only be defined once.”

I believe what happens with LESS in such a case is essentially this:

@pos-x: 0;
@pos-x: @pos-x - 30px; puts it into this loop...
        @pos-x = -30px - 30px ...
        @pox-x = -60px - 30px ...
        @pox-x = -90px - 30px ... etc.

Thus, it continually recalculates the @pos-x trying to come to a final resolution which is never reached. Everytime it is reassigned, it attempts to reevaluate based off that new assignment.

So do something like this:

@pos1-x : 0;
@w : 30px;
.a { background-position: @pos1-x 0; }

@pos2-x: @pos1-x - @w;
.b { background-position: @pos2-x 0; }