CSS Variabel: Memperkuat Gaya Lembaran Anda

Hai, para pengembang web yang sedang berkembang! Hari ini, kita akan mendalam ke dunia yang menarik dari CSS Variabel. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Percayalah, pada akhir panduan ini, Anda akan menggunakannya CSS Variabel seperti seorang ahli!

Apa Itu CSS Variabel?

CSS Variabel, juga dikenal sebagai CSS Custom Properties, adalah entitas yang memungkinkan Anda menyimpan nilai tertentu untuk digunakan kembali di seluruh stylesheet Anda. P想象它们是 wadah yang menyimpan warna kesukaan Anda, ukuran, atau nilai CSS apa pun yang Anda sering gunakan.

Marilah kita mulai dengan contoh sederhana:

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

.button {
background-color: var(--main-color);
}

Dalam kode ini, kita mendefinisikan variabel --main-color dan menggunakannya untuk mengatur warna latar belakang tombol. Bagus, kan?

CSS Variabel - Pendekatan Standar

Cara standar untuk mendeklarasikan CSS Variabel adalah dengan menggunakan dua tanda minus (--) diikuti dengan nama variabel. Ini adalah cara kerjanya:

.container {
--padding: 20px;
--font-size: 16px;
}

.box {
padding: var(--padding);
font-size: var(--font-size);
}

Dalam contoh ini, kita mendefinisikan dua variabel, --padding dan --font-size, dalam kelas .container. Kemudian kita gunakan variabel ini dalam kelas .box. Pendekatan ini memungkinkan pembaruan yang mudah - ubah nilai variabel sekali, dan itu akan diperbarui di mana-mana!

CSS Variabel - Pseudo-class :root

Pseudo-class :root mirip dengan superhero CSS - itu mewakili induk tingkat tertinggi dalam pohon DOM. Ketika kita mendeklarasikan variabel di sini, mereka menjadi dapat diakses secara global. Mari kita lihatnya dalam aksi:

:root {
--primary-color: #e74c3c;
--secondary-color: #2ecc71;
}

.header {
background-color: var(--primary-color);
}

.footer {
color: var(--secondary-color);
}

Dengan mendefinisikan variabel warna kita di :root, kita dapat menggunakannya di mana saja di stylesheet kita. Itu seperti memiliki palet warna di ujung jari Anda!

CSS Variabel - Penerusan Properti Khusus

Salah satu fitur yang paling menarik dari CSS Variabel adalah mereka mewarisi nilai dari elemen induk mereka. Itu seperti pohon keluarga gaya! Periksa ini:

.parent {
--font-size: 18px;
}

.child {
font-size: var(--font-size);
}

.grandchild {
/* Ini juga akan 18px */
font-size: var(--font-size);
}

Dalam contoh ini, keduanya .child dan .grandchild mewarisi nilai --font-size dari .parent. Itu adalah cara yang bagus untuk menjaga konsistensi dalam desain Anda.

CSS Variabel - Nilai Cadangan Properti Khusus

kadang-kadang, hal-hal tidak berjalan sesuai rencana. Tetapi jangan khawatir! CSS Variabel memiliki nilai cadangan untuk Anda. Ini adalah cara kerjanya:

.button {
/* Jika --button-color tidak didefinisikan, itu akan menggunakan biru */
background-color: var(--button-color, blue);
}

Ini seperti memiliki rencana cadangan. Jika --button-color tidak didefinisikan, tombol Anda akan berwarna biru. Selalu baik untuk memiliki jaring keselamatan!

CSS Variabel - Menangani Properti Khusus Tidak Valid

Apa yang terjadi jika sebuah CSS Variabel tidak valid? Mari kita ketahui:

:root {
--text-color: 123;
}

.text {
/* Ini tidak akan bekerja seperti yang diharapkan */
color: var(--text-color);

/* Ini akan cadangan ke hitam */
color: var(--text-color, black);
}

Dalam kasus pertama, browser akan mengabaikan nilai yang tidak valid dan menggunakan nilai warisan atau nilai awal untuk color. Dalam kasus kedua, itu akan menggunakan nilai cadangan black. Selalu validasi variabel Anda untuk menghindari hasil yang tak terduga!

CSS Variabel - Nilai di JavaScript

Magic yang sebenarnya terjadi ketika kita gabungkan CSS Variabel dengan JavaScript. Itu seperti memberikan superpowers ke gaya Anda! Ini adalah sedikit rasa:

// Dapatkan elemen root
const root = document.documentElement;

// Setel sebuah variabel
root.style.setProperty('--main-color', '#9b59b6');

// Dapatkan sebuah variabel
const mainColor = getComputedStyle(root).getPropertyValue('--main-color');

console.log(mainColor); // Keluar: #9b59b6

Ini memungkinkan Anda secara dinamis mengubah gaya Anda berdasarkan interaksi pengguna, waktu hari, atau faktor lain yang Anda pikirkan!

Kesimpulan

CSS Variabel adalah perubahan besar dalam pengembangan web. Mereka membawa fleksibilitas, ketersediaan, dan dinamisme ke stylesheet Anda. Ingat, latihan membuat ahli, jadi jangan takut untuk mencoba konsep ini dalam proyek Anda.

Berikut adalah tabel rujukan cepat dari metode yang kita bahas:

Metode	Deskripsi
Deklarasi	--nama-variabel: nilai;
Penggunaan	properti: var(--nama-variabel);
Skop Global	Gunakan pseudo-class :root
Penerusan	Variabel mewarisi dari elemen induk
Cadangan	var(--nama-variabel, nilai-cadangan)
JavaScript Set	element.style.setProperty('--nama-var', nilai)
JavaScript Get	getComputedStyle(element).getPropertyValue('--nama-var')

Bersenang-senang coding, para master CSS yang akan datang! Ingat, setiap ahli pernah menjadi pemula. Tetap latih, tetap curioso, dan terutama, bersenang-senang dengan kode Anda!

Credits: Image by storyset