Variabel Lapisan CSS

Mengganti variabel global dengan variabel lokal

Dari halaman sebelumnya kita tahu bahwa variabel global dapat diakses/penggunaan di seluruh dokumen, sementara variabel lokal hanya dapat digunakan di pemilih yang mendeklarasikannya.

Lihat contoh di halaman sebelumnya:

Contoh

:root {
  --biru: #1e90ff;
  --putih: #ffffff;
}
body {
  background-color: var(--biru);
}
h2 {
  border-bottom: 2px solid var(--biru);
}
.container {
  color: var(--biru);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--biru);
  border: 1px solid var(--biru);
  padding: 5px;
}

Coba Sendiri

Kali ini, kita ingin variabel hanya diubah di bagian khusus halaman.

Jika kita ingin tombol elemen menggunakan biru yang berbeda, kita dapat mengumumkan ulang variabel --biru di dalam pemilih tombol. Saat kita menggunakan var(--biru) di pemilih ini, ia akan menggunakan nilai variabel --biru lokal yang diumumkan di sini.

Kami melihat variabel --biru lokal akan menutupi variabel --biru global elemen tombol:

Contoh

:root {
  --biru: #1e90ff;
  --putih: #ffffff;
}
body {
  background-color: var(--biru);
}
h2 {
  border-bottom: 2px solid var(--biru);
}
.container {
  color: var(--biru);
  background-color: var(--white);
  padding: 15px;
}
button {
  --biru: #0000ff;
  background-color: var(--white);
  color: var(--biru);
  border: 1px solid var(--biru);
  padding: 5px;
}

Coba Sendiri

Tambahkan variabel lokal baru

Jika hanya digunakan di satu tempat variabel satu, kita juga dapat menyatakan variabel lokal baru, seperti ini:

Contoh

:root {
  --biru: #1e90ff;
  --putih: #ffffff;
}
body {
  background-color: var(--biru);
}
h2 {
  border-bottom: 2px solid var(--biru);
}
.container {
  color: var(--biru);
  background-color: var(--white);
  padding: 15px;
}
button {
  --button-blue: #0000ff;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

Coba Sendiri

Dukungan Browser

Angka dalam tabel menandai versi browser pertama yang mendukung properti ini penuh.

Fungsi
var() 49.0 15.0 31.0 9.1 36.0

Fungsi var() CSS

Fungsi Deskripsi
var() Masukkan nilai variabel CSS.