So vermeiden Sie die Berechnung von calc in CSS3 beim Kompilieren mit weniger

Dieses Mal zeige ich Ihnen, wie calc in CSS3 nicht berechnet wird, wenn es mit less kompiliert wird. Was sind die Vorsichtsmaßnahmen , warum calc in CSS3 nicht berechnet wird, wenn es mit less kompiliert wird? . Werfen wir einen Blick darauf.

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:

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

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

p {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:

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

OK, The Das Analyseergebnis ist normal:

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

Wie ersetzt man jedoch 30 Pixel durch eine Variable ?

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

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

C:UserszhongWebstormProjectstest>grunt less

Running "less:development " (less) task

>> ParseError: Unrecognized input in style.less on line 4, columns 2:

>> 3 @diff : 30px;

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

>> 5 }

Warnung: Fehler beim Kompilieren von style.less Verwendung -- erzwingen, fortzufahren.

Aufgrund von Warnungen abgebrochen.

Also schrieb ich:

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

Es wurde erfolgreich kompiliert, aber Webstorm hat immer dazu aufgefordert Syntaxfehler , obwohl es kompiliert werden kann, gibt es eine Fehlermeldung in der Datei, die mich unglücklich macht

Ich habe lange gesucht und konnte nicht finden, wie es geht debug Syntax-Prompt-Fehlereinstellung

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

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

Diese Schreibweise kann kompiliert werden und in Webstorm werden keine Fehler gemeldet. Deshalb bevorzuge ich diese Schreibweise. Auf diese Weise wird es keine Probleme mehr geben.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

CSS3-Animationssequenzanimation

So verwenden Sie das CSS-Weird-Box-Modell und das Standard-Box-Modell

Das obige ist der detaillierte Inhalt vonSo vermeiden Sie die Berechnung von calc in CSS3 beim Kompilieren mit weniger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!