Wiskundige bewerkingen annuleren in LESS

Soms zijn er situaties waarin we een wiskundige bewerking hebben die niet door LESS mag worden geïnterpreteerd als een opdracht om berekeningen uit te voeren. Dit probleem doet zich bijvoorbeeld voor in de CSS-functie calc:

div {
	width: calc(100% - 10px);
}

Gelukkig kan LESS dergelijke situaties correct verwerken en zal het geen berekening uitvoeren tijdens compilatie.

Er zijn echter ook situaties waarin een expressie die geen berekening vereist, zich op een andere plaats bevindt, bijvoorbeeld in een variabele, zoals hier:

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

In dit geval wordt het resultaat van de berekening in de variabele opgeslagen, en wordt in calc een variabele met de berekende waarde doorgegeven. Om dit te voorkomen, kunnen we expliciet aangeven dat de expressie onveranderd moet blijven.

Hiervoor moet de expressie tussen aanhalingstekens worden geplaatst en ervoor een tilde-teken worden gezet:

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

Pas de code aan zodat deze correct werkt:

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

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