Annullering af matematiske operationer i LESS

Sommetider er der situationer, hvor vi har en matematisk operation, som ikke skal forstås af LESS som en kommando til beregning. For eksempel opstår dette problem i CSS-funktionen calc:

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

Heldigvis kan LESS håndtere sådanne steder korrekt og vil ikke udføre beregningen under kompilering.

Der er dog situationer, hvor et udtryk, der ikke kræver beregning, befinder sig et andet sted, for eksempel i en variabel, sådan her:

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

I dette tilfælde vil resultatet af beregningen blive gemt i variablen, og i calc sendes variablen med den beregnede værdi. For at forhindre dette kan vi eksplicit angive, at udtrykket skal forblive uændret.

For at gøre dette skal udtrykket sættes i anførselstegn og tilde-symbolet skal placeres foran det:

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);
}