Matemaattisten operaatioiden peruuttaminen LESS:ssä

Joskus tilanteissa, joissa meillä on jokin matemaattinen operaatio, jota ei pidä tulkita LESS:llä laskentakomennona. Esimerkiksi tällainen ongelma ilmenee CSS-funktiossa calc:

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

Onneksi LESS osaa käsitellä tällaisia kohtia oikein eikä suorita laskentaa kääntämisen yhteydessä.

On kuitenkin tilanteita, joissa lauseke, joka ei vaadi laskentaa, on muualla, esimerkiksi muuttujassa, näin:

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

Tässä tapauksessa muuttujaan tallennetaan laskennan tulos, ja calc:iin lähetetään muuttuja lasketulla arvolla. Estääksesi tämän tapahtumasta, voimme eksplisiittisesti määrittää, että lauseke on säilytettävä muuttumattomana.

Tätä varten lauseke on sijoitettava lainausmerkkeihin ja sen eteen on asetettava tilde-merkki:

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