Zrušenie matematických operácií v LESS

Niekedy nastanú situácie, keď máme nejakú matematickú operáciu, ktorá by nemala byť v LESS interpretovaná ako príkaz na výpočet. Takýto problém vzniká napríklad v CSS funkcii calc:

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

Našťastie, LESS vie správne spracovať takéto miesta a počas kompilácie nevykoná výpočet.

Avšak existujú situácie, keď výraz, ktorý nevyžaduje výpočet, sa nachádza na inom mieste, napríklad v premennej, takto:

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

V tomto prípade sa do premennej uloží výsledok výpočtu a do calc sa odošle premenná s vypočítanou hodnotou. Aby sa to nestalo, môžeme explicitne určiť, že výraz musí zostať v pôvodnej podobe.

Na tento účel je potrebné výraz uzavrieť do úvodzoviek a umiestniť pred neho znak tildy:

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

Opravte kód, aby fungoval správnym spôsobom:

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

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