Zrušení matematických operací v LESS

Někdy nastanou situace, kdy máme nějakou matematickou operaci, která by neměla být LESS interpretována jako příkaz k výpočtu. K tomuto problému například dochází v CSS funkci calc:

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

Naštěstí LESS umí taková místa správně zpracovat a při kompilaci neprovede výpočet.

Existují však situace, kdy výraz, nevyžadující výpočet, je na jiném místě, například v proměnné, jako zde:

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

V tomto případě se do proměnné uloží výsledek výpočtu a do calc se pošle proměnná s vypočtenou hodnotou. Aby k tomu nedošlo, můžeme explicitně určit, že výraz by měl zůstat v nezměněné podobě.

K tomu je třeba výraz uzavřít do uvozovek a před něj umístit znak vlnovky:

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

Opravte kód, aby fungoval správným způsobem:

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

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