Pembatalan Operasi Matematika di LESS

Kadang-kadang ada situasi di mana kita memiliki operasi matematika tertentu yang seharusnya tidak dianggap LESS sebagai perintah untuk dihitung. Misalnya, masalah seperti ini muncul pada fungsi CSS calc:

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

Untungnya, LESS dapat menangani bagian-bagian seperti ini dengan benar dan tidak akan melakukan perhitungan saat kompilasi.

Namun, ada situasi di mana ekspresi yang tidak memerlukan perhitungan berada di tempat lain, misalnya, dalam variabel, seperti ini:

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

Dalam kasus ini, hasil perhitungan akan disimpan ke dalam variabel, dan ke dalam calc akan dikirim variabel dengan nilai yang sudah dihitung. Agar hal ini tidak terjadi, kita dapat secara eksplisit menunjukkan bahwa ekspresi harus tetap dalam bentuk aslinya.

Untuk melakukannya, ekspresi perlu diapit oleh tanda kutip dan diberi tanda tilde di depannya:

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

Perbaiki kode agar bekerja dengan cara yang benar:

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

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