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:

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

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

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