Matematikai műveletek visszavonása LESS-ben

Előfordulnak olyan helyzetek, amikor van egy matematikai műveletünk, amelyet nem szabad a LESS által kiértékelendő parancsként értelmezni. Például ez a probléma felmerül a CSS calc függvényében:

styles.lessdiv {
  width: calc(100% - 10px);
}

Szerencsére a LESS képes helyesen kezelni az ilyen helyeket, és nem végez számítást a fordítás során.

Vannak azonban olyan helyzetek is, amikor a számítást nem igénylő kifejezés más helyen található, például egy változóban, így:

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

Ebben az esetben a számítás eredménye kerül a változóba, és a calc függvénybe az kiszámolt értékkel rendelkező változó kerül. Ennek elkerülésére explicit módon jelezhetjük, hogy a kifejezés változatlan formában kell maradjon.

Ehhez a kifejezést idézőjelek közé kell tenni és egy hullámvonal jelet kell elé helyezni:

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