CSS: Mengenal CSS Variabel (Custom Property)

Ternyata CSS mempunyai variabel loh. Dengan variabel kita bisa mengurangi kode yang berulang-ulang. CSS variabel juga disebut sebagai Custom Property.

Dasar CSS Variabel

Misal, kita mendeklarasikan variabel bernama btn-color bernilai red dan variabel tersebut dideklarasikan pada selector .button-red.

.button-red {
  --btn-color: red;
}

Semua elemen yang memenuhi selektor .button-red akan memiliki variabel bernama btn-color yang bernilai red. Variabel btn-color kemudian bisa diakses oleh elemen tersebut dan elemen anakannya (children).

Kemudian kita bisa mengakses seperti ini:

.button {
  color: var(--btn-color);
}

Menambahkan -- ke awal nama variabel harus dilakukan (wajib).

Nama variabel dalam CSS itu case sensitive. Jadi btn-color dengan Btn-color itu berbeda.

2 Kelas CSS tadi dapat digunakan seperti berikut:

<p>Contoh 1</p>
<button class="button">Tombol Biasa</button>

<p>Contoh 2</p>
<button class="button button-red">Tombol Merah</button>

<p>Contoh 3</p>
<div class="button-red">
  <button class="button">Tombol Merah</button>
</div>

Dan hasilnya seperti ini:

Pada contoh 1 variabel --btn-color tidak ada jadi warna teks tombol tidak berubah.

Pada contoh 2 variabel --btn-color berisi red sehingga warna teks tombol berubah menjadi merah. Variabel tersebut di deklarasikan pada elemen button dan diakses langsung oleh elemen itu sendiri.

Pada contoh 3, variabel yang dideklarasikan pada div bisa diakses oleh elemen button yang merupakan anak/child dari elemen div.

Contoh Kompleks

Berikut penggunaan CSS Variable yang lebih kompleks:

CSS:

.button-red {
  --btn-color: red;
}

.button {
  --btn-border: black;
  color: var(--btn-color);
  background: none;
  padding: 5px 15px;
  appearance: none;
  border: 1px solid var(--btn-border);
  border-radius: 10px;
}

.button:hover {
  border-color: var(--btn-color);
}

.button:active {
  border-width: 2px;
}

HTML:

<button class="button button-red">Tombol Merah</button>

Hasilnya seperti ini:

Kita dapat membuat kelas CSS untuk warna lainnya.

.button-red {
  --btn-color: red;
}
.button-green {
  --btn-color: green;
}
.button-blue {
  --btn-color: blue;
}

Kelas di atas digunakan seperti berikut:

<button class="button button-red">Tombol Merah</button>
<button class="button button-green">Tombol Hijau</button>
<button class="button button-blue">Tombol Biru</button>

Hasilnya seperti ini.

Variabel untuk Semua Elemen

Bagaimana membuat variable agar bisa diakses oleh semua elemen?. Kita bisa mendeklarasikan variabel pada selektor :root.

:root {
  --btn-color: brown;
}

Contoh HTML:

<button class="button">Tombol Biasa</button>
<button class="button button-red">Tombol Merah</button>
<button class="button button-green">Tombol Hijau</button>
<button class="button button-blue">Tombol Biru</button>

Hasilnya seperti ini:

Nilai Default

Saat mengakses variabel, kita bisa menentukan nilai default (fall back) yang digunakan saat variabel yang ingin kita akses tidak ada.

.box {
  border: 1px solid var(--box-border, blue);
  border-radius: 1rem;
  padding: 5rem;
}

.box-red {
  --box-border: red;
}

.box-green {
  --box-border: green;
}

Maksud dari var(--box-border, blue) adalah mengakses nilai variabel box-border dan jika variabel tersebut tidak ada, maka digunakan blue sebagai nilainya.

<div class="box">Box Biru</div>
<div class="box box-red">Box Merah</div>
<div class="box box-green">Box Hijau</div>

Pada Box Biru variabel box-border tidak ada jadi digunakan blue sebagai nilai border. Pada box lainnya, variabel box-border ada dan digunakan sebagai nilai border.