LESS-те математикалық амалдарды болдырмау

Кейде бізде LESS-тің есептеу командасы ретінде қабылдамауы керек математикалық амалдар болып тұрады. Мысалы, мұндай мәселе CSS функциясы calc-та кездеседі:

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

Бақытымызға орай, LESS мұндай орындарды дұрыс өңдей алады және компиляция кезінде есептеуді жүргізбейді.

Алайда, есептеуді қажет етпейтін өрнек басқа жерде болған жағдайлар болады, мысалы, айнымалыда, мынадай жолмен:

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

Бұл жағдайда айнымалыға есептеу нәтижесі жазылады, және calc-қа есептелген мәні бар айнымалы жіберіледі. Мұндай жағдай болмас үшін, біз өрнектің өзгеріссіз қалуы керектігін анық көрсете аламыз.

Бұл үшін өрнекті тырнақшаға алып, алдына тильда белгісін қою керек:

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