การยกเลิกการดำเนินการทางคณิตศาสตร์ใน LESS

บางครั้งมีสถานการณ์ที่เรามีการดำเนินการทางคณิตศาสตร์บางอย่างที่ไม่ควรถูก LESS ตีความเป็นคำสั่งให้คำนวณ ตัวอย่างเช่น ปัญหาดังกล่าวเกิดขึ้นในฟังก์ชัน CSS calc:

div {
	width: calc(100% - 10px);
}

โชคดีที่ LESS สามารถประมวลผลตำแหน่งดังกล่าวได้อย่างถูกต้องและจะไม่ทำการคำนวณขณะคอมไพล์

อย่างไรก็ตาม มีสถานการณ์ที่นิพจน์ซึ่งไม่ต้องการการคำนวณอยู่ที่ตำแหน่งอื่น ตัวอย่างเช่น ในตัวแปร ดังนี้:

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

ในกรณีนี้ ผลการคำนวณจะถูกบันทึกลงในตัวแปร และใน calc จะส่งตัวแปรที่มีค่าที่คำนวณแล้วไป เพื่อป้องกันไม่ให้เกิดเหตุการณ์ดังกล่าว เราสามารถระบุได้อย่างชัดเจนว่านิพจน์ควรคงอยู่ในรูปแบบเดิม

เพื่อการนี้ จำเป็นต้องนำนิพจน์มาอยู่ในเครื่องหมายคำพูดและใส่เครื่องหมาย tilde (~) ไว้ด้านหน้า:

@exp: ~'100% - 10px';
div {
	width: calc(@exp);
}

แก้ไขโค้ดให้ทำงานได้อย่างถูกต้อง:

@exp1: 80% + 10px;
@exp2: 30vh - 10px;

div {
	width: calc(@exp1);
	margin-top: calc(@exp2);
}