So lösen Sie das Problem, dass calc in CSS3 berechnet wird, wenn weniger kompiliert wird

In diesem Artikel werden hauptsächlich relevante Informationen darüber vorgestellt, wie die Berechnung in CSS3 während der weniger kompilierten Zeit durchgeführt wird. Der Inhalt ist ziemlich gut und wird als Referenz dienen.

Für Front-End-Benutzer ist Less oder Sass bereits eine notwendige Grundkompetenz. Mit diesem Tool können Sie Front-End-Entwicklern viel Codierungszeit sparen, sodass Sie CSS reibungslos und problemlos schreiben können Ich habe beim Hinzufügen von calc zu Less ein Problem festgestellt. Ich habe Folgendes in Less geschrieben:

p {width : calc(100% - 30px);}

Infolgedessen hat Less dies als auszuführenden Operationsausdruck behandelt. , das Ergebnis wurde mir so analysiert:

p {width: calc(70%);}

Ich war damals deprimiert. Wie konnte so ein Phänomen passieren? Nach verschiedenen Suchvorgängen wurde festgestellt, dass sich die Berechnungsmethode von less mit der calc-Methode überschneidet und die beiden in Konflikt geraten. Daher habe ich die Schreibmethode von calc in Less wie folgt umgeschrieben:

p {width : calc(~"100% - 30px");}

OK, das Parsing-Ergebnis ist normal:

p {width: calc(100% - 30px);}

Aber wie ersetzt man 30px durch eine Variable?

　　p {
　　@diff : 30px;
　　width : calc(~"100% - " + @diff);
　　}

Webstorm hat keinen Fehler gemeldet, aber grunt-less hat einen Fehler gemeldet:

C:UserszhongWebstormProjectstest>grunt less

Ausführen der Aufgabe „less:development“ (less)

>> : 30px ;

>> 4 width : calc(~"100% - " + @diff);

>> Warnung: Fehler Kompilierungsstil .less Verwenden Sie --force, um fortzufahren.

Aufgrund von Warnungen abgebrochen.

Also schreiben Sie:

　　p {
　　@diff : 30px;
　　width : calc(~"100% - " @diff);
　　}

Nach dem Kompilieren fragt Webstorm immer nach Syntaxfehlern. Obwohl es kompiliert werden kann, erscheint eine Fehlermeldung, wenn ich mir die Datei ansehe, und ich fühle mich unzufrieden Ich kann nicht finden, wie ich die Einstellungen für Syntax-Eingabeaufforderungsfehler in Webstorm debuggen kann

Also habe ich es wie folgt geändert:

　　p {
　　@diff : 30px;
　　width : calc(~"100% - @{diff}");
　　}

Dies Schreibweise kann kompiliert werden und es werden keine Fehler in Webstorm gemeldet, daher verwende ich lieber diese Schreibweise, damit es keine Probleme mehr gibt.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Analyse zum Unterschied zwischen Animationsattributen Transformation und Übergang und Animationsattributen in CSS3

Anleitung mit dem Unbekannten umgehen Die Höhe der Bildeinstellung ist vertikal zentriert

Über die calc()-Methode in CSS3

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass calc in CSS3 berechnet wird, wenn weniger kompiliert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!