Bagaimana untuk Menghalang LESS-CSS daripada Menimpa Fungsi `calc()`?

Melumpuhkan Penimpaan LESS-CSS bagi Fungsi calc()

Apabila menggunakan LESS-CSS, anda mungkin menghadapi senario di mana calc() fungsi sedang ditimpa semasa penyusunan, mengakibatkan output yang salah. Untuk menangani perkara ini, terdapat teknik untuk melumpuhkan timpa ganti ini.

Penyelesaian: Escaped Strings

Kaedah yang berkesan adalah untuk menyertakan fungsi calc() dalam rentetan yang terlepas . Rentetan yang terlepas dilambangkan dengan meletakkan tilde (~) sebelum dan selepas rentetan. Pendekatan ini berkesan mengarahkan LESS-CSS untuk mengekalkan kandungan rentetan tanpa sebarang perubahan.

Sebagai contoh:

width: ~"calc(100% - 200px)";

Setelah disusun, ini akan menghasilkan:

width: calc(100% - 200px);

seperti yang dikehendaki.

Tambahan Pertimbangan

Jika anda perlu memasukkan Less math ke dalam rentetan terlepas anda, anda boleh menggunakan gabungan rentetan terlepas dan operasi matematik. Contohnya:

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");

Ini akan dikompilasi kepada:

width: calc(100% - 15rem + 15px + 2em);

Ingat, Kurang menggabungkan nilai (rentetan terlepas dan keputusan matematik) dengan ruang secara lalai.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang LESS-CSS daripada Menimpa Fungsi `calc()`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!