Anulowanie operacji matematycznych w LESS

Czasami zdarzają się sytuacje, gdy mamy pewną operację matematyczną, która nie powinna być potraktowana przez LESS jako polecenie do obliczenia. Na przykład, taki problem pojawia się w funkcji CSS calc:

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

Na szczęście LESS potrafi poprawnie przetwarzać takie miejsca i nie wykona obliczenia podczas kompilacji.

Zdarzają się jednak sytuacje, gdy wyrażenie, nie wymagające obliczenia, znajduje się w innym miejscu, na przykład w zmiennej, o tak:

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

W tym przypadku do zmiennej zostanie zapisany wynik obliczenia, a do calc trafi zmienna z obliczoną wartością. Aby do tego nie doszło, możemy wyraźnie wskazać, że wyrażenie powinno pozostać w niezmienionej formie.

Aby to zrobić, wyrażenie należy umieścić w cudzysłowie i poprzedzić je znakiem tyldy:

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