Selektor CSS :root
Untuk dapat menggunakan variable dalam CSS dibutuhkan selektor :root.
Setelah itu, barulah variabel ditempatkan didalamnya.
<html>
<head>
<style>
:root{
--variabel: value;
}
</style>
</head>Variabel dalam selektor :root berfungsi dan berperan layaknya properti CSS pada umumnya.
Untuk nama pada variabel selalu diawali dengan "--" (dua tanda minus).
Dan dipisahkan dengan tanda minus juga jika nama variabel terdiri lebih dari satu suku kata, misal :
--warna-biru-muda: value;
value pada variabel berisi deklarasi dari properti yang dimaksud.
Perhatikan penjelasan pada fungsi variabel dibawah ini untuk memahami value pada variabel.Fungsi var()
Struktur penggunaan variabel CSS:
<head>
<style>
/*---- Variable ----*/
:root{
--nama-variabel: value;
}
/*---- Style CSS ----*/
.selektor{
properti:var(--nama-variabel)
}
</style>
</head>
Dari struktur penggunaannya diatas terlihat bahwa variabel menjadi value dari properti CSS.
Kesimpulannya :Variabel var() berfungsi untuk menggantikan value properti CSS. Dimana value pada suatu properti yang bervariasi cukup digantikan dengan satu var()
Agar lebih jelas, berikut ini demo penggunaan variabel pada elemen HTML, misal:
<p class='satu'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p class='dua'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p class='tiga'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p class='empat'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p class='lima'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p><style>
/*---- Variable ----*/
:root{
--red: red;
--biru-muda: lightblue;
--jeruk: orange;
--gelap: darkgreen;
--abu: grey;
--font-s: normal bold 14px Arial;
--font-m: normal 400 16px Verdana;
--font-l: italic 400 18px Tahoma;
--font-xl: uppercase 20px monospace;
--font-xxl: capitalize 22px 400 Helvetica, sans-serif;
}
/*---- Style CSS ----*/
.satu{
color: var(--red);
border: 1px solid var(--red);
background:var(--abu);
font: var(--font-s)
}
.dua{
color: var(--biru-muda);
border: 1px solid var(--biru-muda);
background:var(--gelap);
font: var(--font-m)
}
.tiga{
color: var(--jeruk);
border: 1px solid var(--jeruk);
background:var(--red);
font: var(--font-l)
}
.empat{
color: var(--gelap);
border: 1px solid var(--gelap);
background:var(--biru-muda);
font: var(--font-xl)
}
.lima{
color: var(--abu);
border: 1px solid var(--abu);
background:var(--jeruk);
font: var(--font-xxl)
}
</style>Cobalah mengganti value dari variabel didalam :root{} pada kode demo diatas dihalaman eksekusi kode (klik tombol Eksekusi kode untuk membuka halaman). Misal red menjadi blue atau orange menjadi black lalu klik tombol Jalankan untuk melihat perubahannya.