Deaktiviere das Überschreiben von calc () durch LESS-CSS

Question

Gerade versuche ich das in meinem LESS-Code mit CSS3 zu machen:

width: calc(100% - 200px);

Wenn LESS allerdings kompiliert, wird dies ausgegeben:

width: calc(-100%);

Gibt es einen Weg, LESS zu sagen, dass es das nicht auf diese Weise kompilieren soll und es normal ausgeben soll?

Answer 1

Verwenden einer escapten Zeichenkette (auch escapten Wert genannt):

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

---

Außerdem, falls Sie Less-Mathematik mit escapierten Zeichenketten mischen müssen:

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

Kompiliert zu:

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

Dies funktioniert, da Less Werte (die escapten Zeichenketten und das Mathematik-Ergebnis) standardmäßig mit einem Leerzeichen verknüpft.

Answer 2

Abgesehen davon, dass ein escapter Wert wie in meiner anderen Antwort verwendet wird, ist es auch möglich, dieses Problem zu beheben, indem die Strikte Mathematik aktiviert wird.

Mit Strikter Mathematik werden nur Berechnungen innerhalb von unnötigen Klammern verarbeitet, so dass Ihr Code:

width: calc(100% - 200px);

Wie erwartet mit der Option Strikter Mathematik funktionieren würde.

Allerdings ist zu beachten, dass die Strikte Mathematik global angewendet wird, nicht nur innerhalb von calc(). Das bedeutet, wenn Sie haben:

font-size: 12px + 2px;

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

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

Strikte Mathematik ist eine gute Option, die man in Betracht ziehen sollte, wenn man ein neues Projekt startet, sonst müssten Sie möglicherweise einen Großteil des Codebasiss neu schreiben. Für die häufigsten Anwendungsfälle ist der Ansatz mit den maskierten Strings, wie in der anderen Antwort beschrieben, geeigneter.

Answer 3

Hier ist ein Cross-Browser Less-Mixin für die Verwendung von CSS's calc mit beliebigen Eigenschaften:

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

Beispiel Verwendung:

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

Und der generierte CSS-Code:

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

Ein Codepen-Beispiel zu diesem Beispiel: http://codepen.io/patrickberkeley/pen/zobdp

Answer 4

Beispiel für eine maskierte Zeichenfolge mit einer Variablen:

@some-variable-height: 10px;

...

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

wird kompiliert zu

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

Answer 5

Die Lösungen von Fabricio funktionieren einwandfrei.

Ein sehr häufiges Anwendungsszenario von calc besteht darin, die Breite um 100% zu erhöhen und etwas Abstand um das Element hinzuzufügen.

Man kann das folgendermaßen tun:

@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 man kann ein Mixin verwenden:

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