Mengapa Sass Tidak Menyelesaikan Pembolehubah Di Dalam Fungsi `calc()`?

Pembolehubah Sass dalam Fungsi CSS Calc(): Ralat Pembolehubah Tidak Selesai

Apabila menggunakan fungsi calc() Sass, anda mungkin menghadapi keadaan di mana Sass pembolehubah tidak diiktiraf dalam hujah fungsi. Pertimbangkan senario berikut:

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

Semasa menggunakan nilai literal 50px menjana hasil yang dijangkakan, beralih kepada pembolehubah $body_padding menghasilkan output yang mengekalkan pembolehubah dalam fungsi calc().

Untuk menyelesaikan isu ini dan memastikan tafsiran pembolehubah yang betul, satu penyelesaian yang disyorkan adalah untuk menginterpolasi pembolehubah dalam fungsi calc() menggunakan yang berikut sintaks:

body
    height: calc(100% - #{$body_padding})

Satu lagi pilihan berdaya maju, khusus untuk kes penggunaan ini, adalah menggunakan sifat kotak sempadan:

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding

Menggunakan kotak sempadan memastikan bahawa sifat ketinggian merangkumi pelapik, dengan berkesan menghapuskan keperluan untuk pengiraan tersuai dalam fungsi calc().

Atas ialah kandungan terperinci Mengapa Sass Tidak Menyelesaikan Pembolehubah Di Dalam Fungsi `calc()`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!