Wie kann man verhindern, dass Less versucht, CSS calc()-Eigenschaften zu kompilieren?

Question

En Weniger Compilern, die ich verwende ( OrangeBits y punktlos 1.3.0.5 ) sind aggressiv bei der Übersetzung

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

in

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

Das ist natürlich nicht erwünscht. Ich frage mich, ob es eine Möglichkeit gibt, dem Less-Compiler zu signalisieren, dass er das Attribut während der Kompilierung im Wesentlichen ignorieren soll. Ich habe die Less-Dokumentation und die Dokumentation der beiden Compiler durchsucht und konnte nichts finden.

Unterstützt Less oder ein Less-Compiler dies?

Wenn nicht, gibt es eine CSS-Erweiterung, die das tut?

Answer 1

Less wertet nicht mehr den Ausdruck innerhalb von calc standardmäßig seit v3.00 .

---

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

Tun Sie dies:

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

In Less 1.4.0 werden wir eine strictMaths Option, die verlangt, dass alle Less-Berechnungen innerhalb von Klammern stehen, so dass die calc funktioniert "out-of-the-box". Dies ist eine Option, da es sich um eine wesentliche Änderung handelt. Frühe Betas von 1.4.0 hatten diese Option standardmäßig aktiviert. In der Release-Version ist sie standardmäßig ausgeschaltet.

Answer 2

Ein sehr häufiger Anwendungsfall von calc ist es, 100% Breite zu nehmen und einen Rand um das Element herum hinzuzufügen.

Man kann dies mit tun:

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);

Answer 3

Es gibt mehrere Optionen für das Escaping mit demselben Ergebnis:

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

Answer 4

Es gibt einen saubereren Weg, Variablen innerhalb der escaped calc einzubinden, wie in diesem Beitrag erklärt: CSS3 calc()-Funktion funktioniert nicht mit Less #974

@variable: 2em;

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

Durch die Verwendung der geschweiften Klammern müssen Sie die Anführungszeichen nicht schließen und wieder öffnen.

Answer 5

@variable: 2em;

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

Referenz: Gibt es eine Möglichkeit, in Less Variablen für den ~-Operator zu verwenden, wie ~"calc(100% - @spacing)";