css - "Fatal Error: infinite loop detected"通过 lessphp

Question

我尝试通过 lessphp 将这个 .less 代码编译为 .css 并得到这个错误:

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

这是我的代码。

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

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

这是怎么回事？我可以在 LESS 中使用变量覆盖吗？

Answer 1

@pos-x: @pos-x - @w; 是不允许的。 The documentation states , “请注意，LESS 中的变量实际上是‘常量’，因为它们只能定义一次。”

我相信在这种情况下 LESS 发生的事情本质上是这样的:

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

因此，它会不断重新计算 @pos-x 以尝试得出一个从未达到的最终解决方案。每次重新分配时，它都会尝试根据新分配重新评估。

所以做这样的事情:

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

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