Weniger aggressive Kompilierung mit CSS3 calc

336

Die von mir verwendeten weniger Compiler ( OrangeBits und dotless 1.3.0.5 ) übersetzen aggressiv

body { width: calc(100% - 250px - 1.5em); }

in

body { width: calc(-151.5%); }

Welches ist offensichtlich nicht erwünscht. Ich frage mich, ob es eine Möglichkeit gibt, dem Less-Compiler zu signalisieren, dass das Attribut während der Kompilierung im Wesentlichen ignoriert wird. Ich habe die Less-Dokumentation und die Dokumentation beider Compiler durchsucht und konnte nichts finden.

Unterstützt der Compiler Less or a Less dies?

Wenn nicht, gibt es einen CSS-Extender, der dies tut?

css compilation less css-calc Nick Babcock
quelle
9
Sind Sie sicher, dass Sie keinen weniger aggressiven Compiler wollen?
Fiatjaf
Ich bin mir auch sehr sicher, dass der Compiler aggressiver sein soll! (Die doppelte Verneinung im vorherigen Kommentar hat mich verwirrt;)) (also meine Stimme auch für das nette Feature unten)
Andreas Dietrich

Antworten:

530

Weniger wertet den Ausdruck calcseitdem nicht mehr standardmäßig aus v3.00.

Ursprüngliche Antwort ( Less v1.x...2.x):

Mach das:

body { width: calc(~"100% - 250px - 1.5em"); }

In Less 1.4.0 haben wir eine strictMathsOption, bei der alle Less-Berechnungen in Klammern stehen müssen, damit calcsie "out-of-the-box" funktionieren. Dies ist eine Option, da es sich um eine wichtige Änderung handelt. Frühe Betas von 1.4.0 hatten diese Option standardmäßig aktiviert. In der Release-Version ist dies standardmäßig deaktiviert.

Luke Page
quelle
2
Beachten Sie, dass, wenn Sie weniger mit der Pause von Twitter kompilieren, diese Flucht ignoriert wird . Zumindest zum Zeitpunkt des Schreibens dieses Kommentars.
Attila Fulop
1
Ich habe es gerade calc(100% - 50px)in less.css 1.4.0 versucht und das Ergebnis war calc(50%). Der großartige ~"..."Trick funktioniert weiterhin, aber ich bin verwirrt über die "Out-of-the-Box" -Anweisung, die mich glauben lässt, dass das oben Genannte funktionieren würde. Luke, wie unterstützt man calcÄnderungen in Less 1.4.0? Vielen Dank!
Brian M. Hunt
2
Die Frage ist, warum less.js überhaupt versucht hat, dies zu berechnen. Es sollte ein Fehler für "100% - 250px" ausgegeben werden, da es keine vernünftige Antwort berechnen kann.
Mpen
72
Für zukünftige Leser können Sie auch nur dem Operator entkommen und so auch Variablen verwenden. Beispiel:calc(@somePercent ~"-" @someLength)
0b10011
10
Anstatt dies weniger falsch zu berechnen oder einen Fehler auszulösen, warum kann es nicht erkennen, was der Benutzer versucht, und es in Ruhe lassen? Offensichtlich können ein Prozentsatz und ein Pixelwert nicht in weniger zusammen berechnet werden.
dfmiller
37

Ein sehr häufiger Anwendungsfall von calc ist die Verwendung einer Breite von 100% und das Hinzufügen eines Randes um das Element.

Man kann dies tun mit:

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
Sebastien Lorber
quelle
-o-calc- wird noch nicht unterstützt .
weiterer
28

Es gibt mehrere Escape-Optionen mit demselben Ergebnis: 

body { width: ~"calc(100% - 250px - 1.5em)"; }
body { width: calc(~"100% - 250px - 1.5em"); }
body { width: calc(100% ~"-" 250px ~"-" 1.5em); }
icl7126
quelle
9

Es gibt eine übersichtlichere Möglichkeit, Variablen in die maskierte Berechnung aufzunehmen, wie in diesem Beitrag erläutert: Die CSS3-Funktion calc () funktioniert nicht mit Less # 974

@variable: 2em;

body{ width: calc(~"100% - @{variable} * 2");}

Wenn Sie die geschweiften Klammern verwenden, müssen Sie die Escape-Anführungszeichen nicht schließen und erneut öffnen.

brohr
quelle