Wie kann ich verhindern, dass Less CSS-Eigenschaften „calc()' falsch kompiliert?

Verhindern einer geringeren Kompilierung von CSS-calc()-Eigenschaften

Weniger Compiler stoßen häufig auf Probleme, wenn sie versuchen, mit calc() definierte CSS-Eigenschaften zu kompilieren. Funktion. Beispielsweise kann die Eingabe:

body { width: calc(100% - 250px - 1.5em); }

unerwartet übersetzt werden in:

body { width: calc(-151.5%); }

Diese ungenaue Transformation kann zu unerwünschten Ergebnissen führen.

Lösung in weniger

Weniger Versionen 3.00 und höher werten Ausdrücke in calc() nicht mehr aus Standard. Daher wird die bereitgestellte Eingabe während der Kompilierung nicht geändert.

Für Less-Versionen vor 3.00 können Sie die Berechnung mit dem ~-Operator umgehen:

body { width: calc(~"100% - 250px - 1.5em"); }

Strict Math Option in Less

Less-Versionen 1.4.0 führten eine strictMaths-Option ein. Wenn diese Option aktiviert ist, müssen alle Less-Berechnungen in Klammern eingeschlossen werden. In diesem Fall wird die Berechnung in calc() berücksichtigt und bei der Kompilierung nicht ausgewertet. Beachten Sie, dass diese Option möglicherweise vorhandenen Code beschädigt und daher mit Vorsicht verwendet werden sollte.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass Less CSS-Eigenschaften „calc()' falsch kompiliert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!