Anularea operațiilor matematice în LESS

Uneori apar situații când avem o operație matematică care nu ar trebui să fie interpretată de LESS ca o comandă de calcul. De exemplu, o astfel de problemă apare în funcția CSS calc:

div {
	width: calc(100% - 10px);
}

Din fericire, LESS știe să proceseze corect astfel de locuri și nu va efectua calculul la compilare.

Există, totuși, situații când expresia, care nu necesită calcul, se află într-un alt loc, de exemplu, într-o variabilă, astfel:

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

În acest caz, în variabilă se va scrie rezultatul calculului, iar în calc se va trimite variabila cu valoarea calculată. Pentru a preveni acest lucru, putem indica explicit că expresia trebuie să rămână în forma sa originală.

Pentru aceasta, expresia trebuie pusă între ghilimele și în fața ei se pune semnul tildă:

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

Corectați codul pentru a funcționa în mod corect:

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

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