it-swarm.com.de

Deaktivieren Sie LESS-CSS Overwriting calc ()

Im Moment versuche ich dies in CSS3 in meinem WENIGER Code zu tun:

width: calc(100% - 200px);

Beim Kompilieren von LESS wird jedoch Folgendes ausgegeben:

width: calc(-100%);

Gibt es eine Möglichkeit, LESS anzuweisen, es nicht auf diese Weise zu kompilieren und es normal auszugeben?

419
AJStacy

Verwenden einer mit maskierten Zeichenfolge (ein mit .k.a. maskierter Wert):

width: ~"calc(100% - 200px)";

Für den Fall, dass Sie Less math mit maskierten Zeichenfolgen mischen müssen:

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");

Kompiliert zu:

width: calc(100% - 15rem + 15px + 2em);

Dies funktioniert so, dass weniger Werte (die maskierten Zeichenfolgen und das mathematische Ergebnis) standardmäßig mit einem Leerzeichen verknüpft werden.

770

Abgesehen von der Verwendung eines maskierten Werts, wie in meine andere Antwort beschrieben, ist es auch möglich, dieses Problem durch Aktivieren der Einstellung Strict Math zu beheben.

Wenn die Option "Strikte Mathematik" aktiviert ist, werden nur Mathematiken verarbeitet, die sich in unnötigen Klammern befinden. Daher lautet Ihr Code:

width: calc(100% - 200px);

Funktioniert erwartungsgemäß mit aktivierter Option für strenge Mathematik.

Beachten Sie jedoch , dass Strict Math global angewendet wird, nicht nur innerhalb von calc(). Das heißt, wenn Sie:

font-size: 12px + 2px;

Die Mathematik wird nicht mehr von Less verarbeitet - es wird font-size: 12px + 2px Ausgegeben, was offensichtlich ungültiges CSS ist. Sie müssten alle mathematischen Daten, die von Less verarbeitet werden sollen, in (zuvor unnötige) Klammern setzen:

font-size: (12px + 2px);

Strict Math ist eine gute Option, die Sie beim Starten eines neuen Projekts in Betracht ziehen sollten, da Sie sonst möglicherweise einen Großteil der Codebasis neu schreiben müssten. Für die häufigsten Anwendungsfälle ist der in andere Antwort beschriebene Escape-String-Ansatz besser geeignet.

62

Hier ist ein browserübergreifender Mix für die Verwendung von calc von CSS mit einer beliebigen Eigenschaft:

.calc(@prop; @val) {
  @{prop}: calc(~'@{val}');
  @{prop}: -moz-calc(~'@{val}');
  @{prop}: -webkit-calc(~'@{val}');
  @{prop}: -o-calc(~'@{val}');
}

Anwendungsbeispiel:

.calc(width; "100% - 200px");

Und das ausgegebene CSS:

width: calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: -o-calc(100% - 200px);

Ein Codepen dieses Beispiels: http://codepen.io/patrickberkeley/pen/zobdp

23

Beispiel für einen maskierten String mit Variable:

@some-variable-height: 10px;

...

div {
    height: ~"calc(100vh - "@some-variable-height~")";
}

kompiliert nach

div {
    height: calc(100vh - 10px );
}
13
Achim Koellner

Die Lösungen von Fabricio funktionieren einwandfrei.

Ein sehr häufiger Anwendungsfall für calc ist das Hinzufügen von 100% Breite und etwas Rand 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);
width: -o-calc(~"100% - "@someMarginVariable*2);

Oder kann ein Mixin verwenden wie:

.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) {
  @minusValue: (@[email protected])*2;
  padding: @paddingSize;
  margin: @marginSize;
  width: calc(~"100% - "@minusValue);
  width: -moz-calc(~"100% - "@minusValue);
  width: -webkit-calc(~"100% - "@minusValue);
  width: -o-calc(~"100% - "@minusValue);
}
6