Wie kann ich verhindern, dass LESS CSS `calc()`-Ausdrücke ändert?

Überwindung des LESS CSS Calc()-Kompilierungsproblems

Beim Versuch, calc() innerhalb von LESS-Code zu verwenden, können Entwickler auf ein Problem stoßen, bei dem Der LESS-Compiler ändert die Berechnung, was zu einer falschen Ausgabe führt. Beispielsweise wird der folgende Code:

width: calc(100% - 200px);

wie folgt gerendert:

width: calc(-100%);

Um dieses Problem zu beheben, kann man in LESS maskierte Zeichenfolgen verwenden. Dieser Ansatz ermöglicht die Behandlung des calc()-Ausdrucks als Zeichenfolge und verhindert so, dass der Compiler ihn manipuliert.

width: ~"calc(100% - 200px)";

Dadurch wird sichergestellt, dass die endgültige Ausgabe mit dem ursprünglichen Code übereinstimmt. Darüber hinaus ist es möglich, Less-Mathematik mit maskierten Zeichenfolgen zu kombinieren, wie unten gezeigt:

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");

Dies wird wie folgt kompiliert:

width: calc(100% - 15rem + 15px + 2em);

Less verkettet Werte standardmäßig mit einem Leerzeichen und aktiviert dies die nahtlose Integration von Escape-Strings und Berechnungsergebnissen. Durch die Implementierung dieser Technik wird das Überschreiben von calc()-Ausdrücken durch LESS effektiv deaktiviert.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass LESS CSS `calc()`-Ausdrücke ändert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!