Mengapa Fungsi CSS calc() Saya Tidak Berfungsi?

Menyelesaikan masalah Fungsi CSS calc()

Fungsi calc() dalam CSS ialah alat yang berkuasa untuk melaksanakan pengiraan pada nilai. Walau bagaimanapun, kadangkala ia boleh rosak disebabkan oleh kesilapan atau salah faham. Satu isu biasa ialah dengan jarak yang tidak betul.

Keperluan untuk Jarak

Pengendali dalam ungkapan calc() mesti dipisahkan dengan ruang. Mengabaikan peraturan ini boleh menyebabkan penghuraian yang salah, seperti yang ditunjukkan oleh contoh yang disediakan:

calc(100vw/4-(10-4))  // Incorrect (no space after '-')
calc(100vw/4-(10px-4))  // Incorrect (no space after 'px')
calc(100vw/4-(10px-4px)) // Incorrect (no space before and after '-', no space between 'px')

Untuk menyelesaikan masalah ini, cuma perkenalkan ruang seperti berikut:

calc(100vw/4 - (10 - 4))
calc(100vw/4 - (10px - 4)) // Optionally, space before 'px' for consistency

Ekspresi Bersarang

fungsi calc() boleh bersarang antara satu sama lain, bertindak seperti kurungan mudah. Walau bagaimanapun, adalah penting untuk mengikuti peraturan jarak yang sama untuk ungkapan bersarang. Contohnya:

calc(100vw/4 - calc(10px - 4px)) // Outer and inner expressions spaced correctly

Bekerja dengan Pembolehubah

Dalam gelung SASS, pembolehubah boleh digantikan dalam ungkapan calc(). Untuk memastikan pengiraan yang betul, pastikan pembolehubah dimasukkan dengan betul dalam kurungan dan operator mempunyai jarak yang betul. Contohnya, untuk mengurus ungkapan calc(100vw/x-(10px-x)) di mana x digantikan dalam gelung SASS:

calc(100vw / ($x) - (10px - $x)) // Spaces around operators, parentheses around variable

Dengan mengikut peraturan ini, anda boleh menyelesaikan masalah dan memanipulasi calc dengan berkesan () berfungsi dalam kod CSS anda. Ingat untuk menambah ruang antara operator, ungkapan sarang dengan berhati-hati dan gunakan kurungan untuk pembolehubah dalam calc().

Atas ialah kandungan terperinci Mengapa Fungsi CSS calc() Saya Tidak Berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!