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:

styles.lessdiv {
  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:

styles.less@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:

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