Salah satu fitur terbaru yang dimiliki oleh CSS3 yang sudah banyak didukung oleh berbagai browser adalah penggunaan variabel CSS. Pemakaian variabel ini bisa menjadikan tata gaya yang lebih dinamis dan fleksibel. Konsep variabel ini datang dari CSS preprocessor seperti LESS dan SASS.

Sintaks dasar variabel CSS

Variabel CSS harus diset di dalam selector, sama seperti kita mengeset properti gaya CSS, dengan diawali dua buah strip. Misalnya untuk mengeset variabel warna-dasar pada <div>:

div {
  --warna-dasar: green;
}

Untuk menggunakan nilai dari variabel, apit nama variable dalam var():

a {
  color: var(--warna-dasar);
}

Variabel ini sifatnya cascading, jadi untuk contoh di atas, variabel --warna-dasar hanya akan diterapkan untuk tag <a> yang berada di dalam <div> saja. Sebagai contoh, perhatikan HTML berikut:

<h1><a href="https://www.youtube.com/channel/UCx4T73vmS0JGRkAFeEBOOmQ">Colors</a></h1>
<div class="subtitle">Oleh Stella Jang</div>
<div class="lirik">
  <p>
    What's your color? I wanna know<br />
    What's your color? I wanna know<br />
    What's your color? I wanna know<br />
    I wanna know, I wanna know, I wanna know
  </p>
  <p>
    I could be red, or I could be yellow<br />
    I could be blue, or I could be purple<br />
    I could be green, or pink or black or white<br />
    I could be every color you like
  </p>
  <p>
    <a href="https://www.youtube.com/watch?v=a7Ip0gFZhB0" class="button">Tonton video</a>
    atau
    <a href="https://www.youtube.com/channel/UCx4T73vmS0JGRkAFeEBOOmQ">Lihat video lainnya</a>
  </p>
</div>

Mengapa perlu menggunakan variabel CSS?

Di sini kita lihat bahwa hanya link di dalam <div> yang berwarna hijau (“Tonton video” dan “Lihat video lainnya”) sedangkan link di dalam <h1> tetap menggunakan warna bawaannya (“Colors”). Ini karena variabel --warna-dasar hanya ditemukan pada <div> tapi tidak ada pada <h1> maupun <a> sehingga nilainya tidak diketahui oleh link “Colors”.

Pertanyaannya, mengapa harus repot-repot menggunakan variabel, toh untuk mengeset warna <a> seperti di atas kita juga bisa secara spesifik mengeset warna dengan CSS div a { color: green; }

Penggunaan variabel ini memudahkan jika kita membuat semacam tema yang bisa bervariasi. Misalnya, untuk pengunjung publik warna linknya hijau, sedangkan untuk member khusus tema warna linknya menjadi merah.

Misalnya, selain link biasa kita juga punya class button untuk menjadikan link “Tonton video” sebuah tombol dengan warna serupa:

.button {
  background: green;
  color: white;
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  text-decoration: none;
}

Jika tanpa variabel, kita harus menambah selector untuk semua elemen yang warnanya akan diubah, misalnya <div> untuk tema member memiliki tambahan class .member, tambahan CSS-nya menjadi:

div.member a {
  color: red;
}
div.member .button {
  background: red;
}

Sedangkan, jika kita menggunakan variabel untuk CSS dasarnya sbb:

div {
  --warna-dasar: green;
}

a {
  color: var(--warna-dasar);
}

.button {
  background: var(--warna-dasar);
  color: white;
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  text-decoration: none;
}

Maka untuk membuat tema turunan “member” cukup ubah nilai variabelnya saja:

div.member {
  --warna-dasar: red;
}

Toggle div.member

Memberi nilai fallback jika variabel tidak diketahui

Sebagaimana dijelaskan di atas, sebuah variabel hanya bisa diketahui jika diset pada elemen yang bersangkutan atau diturunkan dari elemen-elemen atasnya. Tapi pada contoh di atas, pada link di dalam <h1> variabel --warna-dasar tidak diketahui nilainya. Jika tidak diketahui, kita bisa menentukan apa nilai fallback-nya sbb:

a {
  color: var(--warna-dasar, --warna-tautan, blue);
}

Kode di atas bisa dibaca menjadi “gunakan nilai pada variabel --warna-dasar, tapi jika tidak diketahui, gunakan nilai dari variabel --warna-tautan, jika variabel ini tidak diketahui juga nilainya, gunakan blue sebagai nilainya”.