Wie kann das Problem gelöst werden, wenn die Berechnung von CSS3 berechnet wird, wenn weniger kompiliert wird?

Dieses Mal zeige ich Ihnen, wie Sie das Problem lösen können, wenn die Berechnung von CSS3 beim Kompilieren mit less erfolgt. Welche Vorsichtsmaßnahmen sind zu lösen, wenn die Berechnung von CSS3 beim Kompilieren mit less berechnet wird? Das Folgende ist ein praktischer Fall. Schauen wir uns das an.

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 einige Probleme festgestellt. Ich habe dies in Less geschrieben:

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

Infolgedessen hat Less dies als arithmetischen Ausdruck ausgeführt und das Ergebnis wurde für mich wie folgt analysiert:

div {width: calc(70%);}

Ich war damals deprimiert. 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:

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

OK, The Das Parsing-Ergebnis ist normal:

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

Wie ersetzt man jedoch 30px durch eine Variable?

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

Als ich so schrieb, hat Webstorm keinen Fehler gemeldet, aber grunt-less hat einen Fehler gemeldet:

C:\Users\zhong\WebstormProjects\test>grunt less
Running "less:development" (less) task
>> ParseError: Unrecognised input in style.less on line 4, column 2:
>> 3    @diff : 30px;
>> 4    width : calc(~"100% - " + @diff);
>> 5 }
Warning: Error compiling style.less Use --force to continue.
Aborted due to warnings.

Also habe ich so geschrieben:

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

Es wurde erfolgreich kompiliert, aber Webstorm meldet immer einen Syntaxfehler . Obwohl es kompiliert werden kann, erscheint bei mir eine Fehlermeldung

Unzufrieden. Ich habe lange gesucht, aber ich kann immer noch nicht finden, wie ich die Einstellungen für Syntax-Eingabeaufforderungsfehler in Webstorm debuggen kann

Also habe ich es in die folgende Schreibweise geändert:

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

Diese Schreibweise kann kompiliert werden und in Webstorm werden keine Fehler gemeldet. Daher bevorzuge ich diese Schreibweise, damit keine weiteren Probleme auftreten.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website Andere verwandte Artikel!

Verwandte Lektüre:

So erstellen Sie einen Kreisanimationseffekt in HTML5

In h5 sollte die mobile Seite sein zoomed So implementieren Sie

Achten Sie unbedingt auf die drei häufigsten falschen HTML5-Verwendungen

Das obige ist der detaillierte Inhalt vonWie kann das Problem gelöst werden, wenn die Berechnung von CSS3 berechnet wird, wenn weniger kompiliert wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!