Wie kann ich verhindern, dass weniger Compiler CSS-Eigenschaften „calc()' falsch auswerten?

Eigenschaften von Less und CSS Calc(): Aggressive Kompilierung verhindern

Less-Compiler wie OrangeBits und dotless versuchen möglicherweise, zu kompilieren und auszuwerten CSS calc()-Eigenschaften, die zu falschen Ergebnissen führen. In diesem Artikel werden Möglichkeiten untersucht, dieses Verhalten zu verhindern und gewünschte CSS-Stile beizubehalten.

Das Standardverhalten von Less

Less wird zur proaktiven Auswertung von Ausdrücken in calc() verwendet, was zu fehlerhaften Ergebnissen führt . Zum Beispiel body { width: calc(100% - 250px - 1.5em); } würde fälschlicherweise in body { width: calc(-151.5%) übersetzt werden; }.

Lösung für Less

Gehen Sie folgendermaßen vor:

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

Durch die Verwendung des ~-Operators signalisieren Sie Less, den Ausdruck währenddessen zu ignorieren Zusammenstellung.

Solution for Less v3.00 und Später

Less wertet Ausdrücke in calc() standardmäßig nicht mehr automatisch aus. Daher sind für Less v3.00 und höher keine besonderen Maßnahmen erforderlich, um eine aggressive Kompilierung zu verhindern.

Strenge Mathematik-Option

In Less 1.4.0 gibt es eine strictMaths-Option, die erfordert, dass alle Less-Berechnungen in Klammern eingeschlossen werden. Diese Option stellt sicher, dass calc() ohne Änderungen wie vorgesehen funktioniert. Standardmäßig ist diese Option in der Release-Version von Less 1.4.0 deaktiviert.

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