Bolehkah Pembolehubah Asli CSS Digunakan dalam Pertanyaan Media?

Menggunakan pembolehubah asli CSS dalam pertanyaan media

Pembolehubah asli CSS ialah alat yang berkuasa untuk mengawal gaya berdasarkan nilai pembolehubah yang ditakrifkan dalam CSS. Walau bagaimanapun, terdapat had untuk menggunakan pembolehubah ini dalam pertanyaan media.

Isu timbul apabila cuba menggunakan pembolehubah CSS dalam pertanyaan media. Sebagai contoh, pertimbangkan kod berikut:

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {

}

Kod ini bertujuan untuk mentakrifkan pertanyaan media yang menggunakan gaya apabila lebar port pandangan kurang daripada atau sama dengan nilai yang disimpan dalam pembolehubah --mobile-breakpoint. Walau bagaimanapun, pendekatan ini tidak berfungsi kerana pembolehubah CSS tidak boleh digunakan dalam pertanyaan media.

Spesifikasi CSS secara eksplisit menyatakan bahawa fungsi var(), yang digunakan untuk mengakses pembolehubah CSS, hanya boleh digunakan dalam nilai sifat. Ia tidak boleh digunakan dalam nama harta, pemilih atau pertanyaan media. Had ini dikenakan untuk memastikan pembolehubah CSS digunakan untuk tujuan yang dimaksudkan untuk mengawal nilai gaya, dan bukannya mengubah suai struktur atau kefungsian dokumen CSS.

Untuk menangani isu ini, seseorang boleh menggunakan prapemproses CSS seperti Sass atau Kurang. Prapemproses ini membolehkan penggunaan pembolehubah dalam pertanyaan media dengan menterjemah kod ke dalam CSS yang sah. Menggunakan prapemproses, kod sebelumnya boleh ditulis semula sebagai:

$mobile-breakpoint: 642px;

@media (max-width: $mobile-breakpoint) {

}

Dengan menggunakan prapemproses, pembolehubah $mobile-breakpoint boleh digunakan dalam pertanyaan media, membenarkan tingkah laku gaya yang diingini berdasarkan yang ditentukan berubah-ubah.

Atas ialah kandungan terperinci Bolehkah Pembolehubah Asli CSS Digunakan dalam Pertanyaan Media?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!