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:

div {
	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:

@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ą:

@exp: ~'100% - 10px';
div {
	width: calc(@exp);
}

Pataisykite kodą, kad jis veiktų teisingu būdu:

@exp1: 80% + 10px;
@exp2: 30vh - 10px;

div {
	width: calc(@exp1);
	margin-top: calc(@exp2);
}