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?
@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; }