Wie kann verhindert werden, dass LESS-CSS die Funktion „calc()' überschreibt?

Deaktivieren des LESS-CSS-Überschreibens der Funktion calc()

Bei der Verwendung von LESS-CSS kann es zu einem Szenario kommen, in dem die Funktion calc() Die Funktion wird beim Kompilieren überschrieben, was zu einer falschen Ausgabe führt. Um dieses Problem zu beheben, gibt es eine Technik, um dieses Überschreiben zu deaktivieren.

Lösung: Escaped Strings

Eine effektive Methode besteht darin, die Funktion calc() in einen Escape-String einzuschließen . Eine maskierte Zeichenfolge wird durch das Einfügen einer Tilde (~) vor und nach der Zeichenfolge gekennzeichnet. Dieser Ansatz weist LESS-CSS effektiv an, den Inhalt der Zeichenfolge ohne Änderungen beizubehalten.

Zum Beispiel:

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

Bei der Kompilierung wird Folgendes ausgegeben:

width: calc(100% - 200px);

nach Wunsch.

Zusätzlich Überlegungen

Wenn Sie Less-Mathematik in Ihren Escape-String integrieren müssen, können Sie eine Kombination aus Escape-Strings und mathematischen Operationen verwenden. Zum Beispiel:

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

Dies wird kompiliert zu:

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

Denken Sie daran, dass Less Werte (Escape-Zeichenfolgen und mathematische Ergebnisse) standardmäßig mit einem Leerzeichen verkettet.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass LESS-CSS die Funktion „calc()' überschreibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!