Matematinių operacijų atšaukimas LESS

Kartais pasitaiko situacijų, kai mes turime tam tikrą matematinę operaciją, kuri neturėtų būti supranta kaip komanda skaičiavimui atlikti. Pavyzdžiui, tokia problema iškyla CSS funkcijoje calc:

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

Laimei, LESS sugeba teisingai apdoroti tokias vietas ir neatliks skaičiavimo kompiliavimo metu.

Tačiau pasitaiko situacijų, kai išraiška, kuriai nereikia skaičiavimo, yra kitoje vietoje, pavyzdžiui, kintamajame, štai taip:

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

Šiuo atveju į kintamąjį bus įrašytas skaičiavimo rezultatas, ir į calc bus išsiųstas kintamasis su apskaičiuota reikšme. Kad tai ne įvyktų, mes galime aiškiai nurodyti, kad išraiška turi likti nepakitusi.

Norint tai padaryti, išraišką reikia paimti į kabutes ir prieš ją padėti tilde ženklą:

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