Aufhebung mathematischer Operationen in LESS

Manchmal gibt es Situationen, in denen wir einen mathematischen Ausdruck haben, der nicht von LESS als Berechnungsbefehl interpretiert werden sollte. Ein solches Problem tritt beispielsweise bei der CSS-Funktion calc auf:

styles.lessdiv {
  width: calc(100% - 10px);
}

Glücklicherweise kann LESS solche Stellen korrekt verarbeiten und führt bei der Kompilierung keine Berechnung durch.

Es gibt jedoch auch Situationen, in denen sich ein Ausdruck, der keine Berechnung erfordert, an einer anderen Stelle befindet, zum Beispiel in einer Variable, wie hier:

styles.less@exp: 100% - 10px;
div {
  width: calc(@exp);
}

In diesem Fall wird das Ergebnis der Berechnung in die Variable geschrieben, und an calc wird eine Variable mit dem berechneten Wert übergeben. Um dies zu verhindern, können wir explizit angeben, dass der Ausdruck unverändert bleiben soll.

Dazu muss der Ausdruck in Anführungszeichen gesetzt und mit einer Tilde (~) versehen werden:

styles.less@exp: ~'100% - 10px';
div {
  width: calc(@exp);
}

styles.less@exp1: 80% + 10px;
@exp2: 30vh - 10px;

div {
  width: calc(@exp1);
  margin-top: calc(@exp2);
}