Matemaatiliste operatsioonide tühistamine LESS-is

Mõnikord tekivad olukorrad, kus meil on mõni matemaatiline tehe, mida ei tohi LESS-i poolt käsuna arvutamiseks tõlgendada. Näiteks tekib selline probleem CSS-funktsioonis calc:

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

Õnneks oskab LESS selliseid kohti korrektselt töödelda ega soorita arvutamist kompileerimisel.

Kuid on ka olukordi, kus avaldis, mida ei vaja arvutamist, asub muus kohas, näiteks muutujas, nagu siin:

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

Sel juhul salvestatakse muutujasse arvutuse tulemus ja calc-isse saadetakse muutuja arvutatud väärtusega. Selle vältimiseks võime selgesõnaliselt määrata, et avaldis peab jääma muutmata kujul.

Selleks tuleb avaldis panna jutumärkidesse ja selle ette panna tilde märk:

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