Hủy bỏ các phép toán trong LESS

Đôi khi có những tình huống khi chúng ta có một phép toán nào đó không nên được LESS hiểu là lệnh tính toán. Ví dụ, vấn đề như vậy phát sinh trong hàm CSS calc:

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

May mắn thay, LESS biết cách xử lý đúng đắn những chỗ như vậy và sẽ không thực hiện tính toán khi biên dịch.

Tuy nhiên, cũng có những tình huống khi biểu thức không yêu cầu tính toán lại nằm ở một nơi khác, ví dụ, trong biến, như thế này:

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

Trong trường hợp này, kết quả tính toán sẽ được ghi vào biến, và trong calc sẽ được gửi biến với giá trị đã tính toán. Để điều đó không xảy ra, chúng ta có thể chỉ định rõ ràng rằng biểu thức phải được giữ nguyên dạng không thay đổi.

Để làm điều này, biểu thức cần được đặt trong dấu nháy kép và đặt dấu ngã (~) ở phía trước nó:

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

Sửa code để nó hoạt động một cách chính xác như sau:

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

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