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

Memahami Interpolasi Pembolehubah Sass dalam Fungsi CSS calc()

Kod anda menggunakan fungsi calc() dalam Sass, yang membenarkan pengiraan dinamik untuk nilai CSS. Walau bagaimanapun, anda menghadapi masalah apabila cuba menggunakan pembolehubah Sass dalam fungsi calc(). Artikel ini akan menyelidiki penyelesaian kepada masalah ini.

Menginterpolasi Pembolehubah Sass

Untuk memastikan fungsi calc() mentafsir pembolehubah Sass dengan betul, anda perlu menginterpolasinya dalam fungsi. Interpolasi bermaksud memasukkan nilai pembolehubah ke dalam kod. Dalam Sass, ini boleh dicapai dengan melampirkan nama pembolehubah dalam #{}.

Kod Semakan

Berikut ialah kod yang disemak yang menginterpolasi pembolehubah $body_padding dalam calc () fungsi:

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

Dengan menginterpolasi pembolehubah, Sass menilai pembolehubahnya nilai, menggantikannya dalam fungsi calc() dan menjana output CSS yang betul.

Pendekatan Alternatif: Menggunakan kotak sempadan

Pendekatan alternatif untuk menangani situasi ini adalah untuk menetapkan sifat saiz kotak elemen kepada kotak sempadan. Ini memastikan pengiraan ketinggian termasuk padding dalam nilai 100%.

Kod Semakan Menggunakan kotak sempadan

body {
  box-sizing: border-box;
  height: 100%; // 100% includes the padding
  padding-top: $body_padding;
}

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