Отмяна на математически операции в LESS

Понякога има ситуации, в които имаме някаква математическа операция, която не трябва да бъде възприета от LESS като команда за изчисление. Например, такъв проблем възниква в CSS функцията calc:

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

За щастие, LESS може коректно да обработва такива места и няма да извърши изчисление при компилация.

Има обаче ситуации, в които израз, който не изисква изчисление, се намира на друго място, например в променлива, ето така:

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

В този случай в променливата ще се запише резултатът от изчислението и в calc ще се изпрати променливата с изчислената стойност. За да не се случи това, можем изрично да укажем, че изразът трябва да остане в непроменен вид.

За това изразът трябва да се постави в кавички и да се постави знак тилда пред него:

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