Pembolehubah CSS – Memperkemas Lembaran Gaya Anda

Kuliah 17: Pembolehubah CSS – Memperkemas Lembaran Gaya Anda

Dalam kuliah ini, kita akan mempelajari tentang Pembolehubah CSS (juga dikenali sebagai sifat tersuai) dan cara ia membantu memudahkan kod anda dengan membenarkan anda menggunakan semula nilai merentas lembaran gaya anda.

1. Apakah Pembolehubah CSS?

Pembolehubah CSS membolehkan anda menyimpan nilai seperti warna, saiz fon atau jarak di lokasi pusat dan menggunakannya semula sepanjang helaian gaya anda. Ini menjadikan kod anda lebih boleh diselenggara, kerana anda boleh mengemas kini nilai dengan mudah di satu tempat dan bukannya mencari seluruh helaian gaya.

Pembolehubah CSS ditakrifkan dengan -- awalan dan anda boleh mengaksesnya dengan fungsi var().

2. Mentakrifkan Pembolehubah CSS

Pembolehubah CSS biasanya ditakrifkan dalam pemilih :root, yang mewakili peringkat atas dokumen.

Contoh:

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size: 16px;
}

body {
    font-size: var(--font-size);
    color: var(--primary-color);
}

h1 {
    color: var(--secondary-color);
}

Dalam contoh ini:

• Kami mentakrifkan --warna-utama, --warna-sekunder dan --saiz fon sebagai pembolehubah tersuai kami.
• Pembolehubah ini kemudiannya digunakan dalam badan dan gaya h1 dengan fungsi var().

3. Faedah Menggunakan Pembolehubah CSS

• Kebolehgunaan semula: Anda boleh menggunakan semula nilai yang sama di seluruh helaian gaya anda, mengurangkan pertindihan kod.
• Kebolehselenggaraan: Jika anda perlu menukar warna atau saiz fon, anda hanya perlu mengemas kini nilai pembolehubah di satu tempat.
• Kemas Kini Dinamik: Pembolehubah CSS boleh dikemas kini secara dinamik menggunakan JavaScript, membolehkan lebih fleksibiliti dalam mencipta reka bentuk interaktif.

4. Mengatasi Pembolehubah CSS

Anda boleh mengatasi Pembolehubah CSS dalam pemilih tertentu untuk memberikan nilai konteks khusus.

Contoh:

:root {
    --primary-color: #3498db;
}

.dark-mode {
    --primary-color: #34495e;
}

body {
    color: var(--primary-color);
}

Dalam contoh ini, --primary-color ditindih apabila kelas .dark-mode digunakan. Ini membolehkan anda menukar antara skema warna yang berbeza (cth., mod terang dan mod gelap) dengan mudah.

5. Menggunakan Pembolehubah dengan Pertanyaan Media

Pembolehubah CSS berfungsi dengan baik dengan pertanyaan media, membolehkan anda melaraskan nilai berdasarkan saiz skrin.

Contoh:

:root {
    --font-size: 16px;
}

@media (max-width: 600px) {
    :root {
        --font-size: 14px;
    }
}

body {
    font-size: var(--font-size);
}

Dalam contoh ini, pembolehubah --font-size dikurangkan pada skrin yang lebih kecil, menjadikan teks lebih mudah dibaca pada peranti mudah alih.

6. Nilai Sandaran dalam Pembolehubah CSS

Anda boleh memberikan nilai sandaran untuk Pembolehubah CSS sekiranya pembolehubah tidak ditakrifkan atau disokong oleh penyemak imbas.

Contoh:

body {
    font-size: var(--font-size, 18px);
}

Di sini, jika --font-size tidak ditentukan, penyemak imbas akan lalai kepada 18px.

7. Pembolehubah dan JavaScript

Salah satu aspek Pembolehubah CSS yang paling berkuasa ialah ia boleh dimanipulasi menggunakan JavaScript, membolehkan anda mencipta gaya yang dinamik dan interaktif.

Contoh:

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

Dalam contoh ini, pembolehubah --primary-color dikemas kini kepada warna baharu (#e74c3c) menggunakan JavaScript, yang mengubah gaya halaman secara dinamik.

8. Kes Penggunaan Praktikal

• Tema: Gunakan Pembolehubah CSS untuk mencipta tema terang dan gelap untuk tapak web anda.
• Sistem Reka Bentuk: Bina sistem reka bentuk yang konsisten dengan menggunakan pembolehubah untuk warna, jarak dan tipografi.
• Interaksi Dinamik: Cipta elemen interaktif yang mengemas kini gayanya dalam masa nyata menggunakan Pembolehubah CSS dan JavaScript.

Kesimpulan

Pembolehubah CSS menawarkan cara yang fleksibel untuk mengurus gaya anda, meningkatkan kebolehselenggaraan kod dan mendayakan kemas kini dinamik. Dengan memasukkan Pembolehubah CSS ke dalam aliran kerja anda, anda boleh menyelaraskan proses pembangunan anda dan mencipta helaian gaya yang lebih boleh diselenggara dan berskala.

---

Ikuti saya di LinkedIn

Ridoy Hasan

Atas ialah kandungan terperinci Pembolehubah CSS – Memperkemas Lembaran Gaya Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!