2

この .less コードを lessphp 経由で .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 で変数のオーバーライドを使用できますか?

4

1 に答える 1

2

@pos-x: @pos-x - @w;許可されていません。ドキュメントには、「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; }
于 2012-12-17T17:42:04.780 に答える