it-swarm.com.de

Weniger aggressive Kompilierung mit CSS3 calc

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

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

in

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

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

Unterstützt Less oder ein Less-Compiler dies?

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

322
Nick Babcock

Less wertet den Ausdruck in calc standardmäßig nicht mehr aus, seit 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 strictMaths -Option, bei der alle Less-Berechnungen in eckigen Klammern stehen müssen, sodass calc "out-of-the-box" funktioniert. Dies ist eine Option, da es sich um eine grundlegende Änderung handelt. Frühe Beta-Versionen von 1.4.0 hatten diese Option standardmäßig aktiviert. Die Release-Version ist standardmäßig deaktiviert.

516
Luke Page

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

Das kann man machen mit:

@someMarginVariable = 15px;

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

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); }
28
icl7126

Es gibt eine übersichtlichere Möglichkeit, Variablen in das Escaped Calc aufzunehmen, wie in diesem Beitrag erläutert: CSS3 calc () funktioniert nicht mit Less # 974

@variable: 2em;

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

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

8
brohr