Bagaimanakah Saya Boleh Menggunakan Pembolehubah Sass Di Dalam Fungsi `calc()` CSS?

Pembolehubah Sass Dalam Fungsi CSS calc()

Apabila memasukkan pembolehubah Sass ke dalam fungsi calc(), cabaran mungkin timbul. Sebagai contoh, menggunakan pembolehubah seperti $body_padding dalam calc() tidak secara automatik mencetuskan penggantian yang diingini. Sebaliknya, output menyerupai yang berikut:

body {
    padding-top: 50px;
    height: calc(100% - $body_padding);
}

Untuk membetulkan keadaan ini dan memastikan Sass menyedari keperluan untuk menggantikan pembolehubah dalam fungsi calc(), gunakan interpolasi. Interpolasi pembolehubah menggunakan sintaks #{$body_padding}:

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

Sebagai alternatif, menggunakan sifat kotak sempadan juga boleh menyelesaikan isu ini dengan berkesan:

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

Dengan kaedah ini, Sass kini akan mentafsir dan menggantikan pembolehubah dengan betul dalam fungsi calc(), mencapai pengiraan yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Pembolehubah Sass Di Dalam Fungsi `calc()` CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!