Avbryte matematiske operasjoner i LESS

Noen ganger oppstår det situasjoner hvor vi har en matematisk operasjon som ikke skal forstås av LESS som en kommando for beregning. For eksempel oppstår et slikt problem i CSS-funksjonen calc:

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

Heldigvis kan LESS håndtere slike steder korrekt og vil ikke utføre beregningen under kompilering.

Det finnes imidlertid situasjoner hvor et uttrykk som ikke krever beregning, befinner seg på et annet sted, for eksempel i en variabel, slik som her:

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

I dette tilfellet vil resultatet av beregningen bli lagret i variabelen, og i calc vil en variabel med den beregnede verdien bli sendt. For å forhindre at dette skjer, kan vi eksplisitt angi at uttrykket skal forbli uendret.

For å gjøre dette må uttrykket stå i anførselstegn og ha en tilde foran:

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

Korriger koden slik at den fungerer på riktig måte:

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

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