Heim > Web-Frontend > CSS-Tutorial > Wie kann ich verhindern, dass LESS-CSS `calc()`-Funktionen ändert?

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

DDD
Freigeben: 2024-12-13 07:36:12
Original
605 Leute haben es durchsucht

How Can I Prevent LESS-CSS from Modifying `calc()` Functions?

Problemumgehung für das Überschreiben von calc() durch LESS-CSS

LESS-CSS neigt dazu, die Syntax von calc()-Funktionen zu ändern, was zu unerwarteten Ausgaben führt. Um dieses Problem zu beheben, ist eine alternative Methode erforderlich, um zu verhindern, dass LESS die Syntax ändert.

Lösung: Escaped Strings

Eine effektive Lösung ist die Verwendung von Escaped Strings, auch bekannt als Escaped Strings als maskierte Werte. Durch die Verwendung eines Tilde-Zeichens (~) vor den Anführungszeichen interpretiert LESS den darin enthaltenen Inhalt als Literalzeichenfolge und verhindert so die Durchführung von Berechnungen oder Änderungen.

Wenn Sie beispielsweise den Wert calc(100% - 200px) ohne Änderungen würden Sie die folgende Syntax verwenden:

width: ~"calc(100% - 200px)";
Nach dem Login kopieren

Escaped Strings with Less Mathematik

In Fällen, in denen Sie Less-Mathematik mit maskierten Zeichenfolgen kombinieren müssen, wie zum Beispiel:

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

LESS verkettet diese Werte standardmäßig mit einem Leerzeichen, was zum gewünschten Ergebnis führt Ausgabe:

width: calc(100% - 15rem + 15px + 2em);
Nach dem Login kopieren

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage