Variabel CSS

Variabel CSS

Fungsi var() digunakan untuk memasukkan nilai variabel CSS.

Variabel CSS dapat mengakses DOM, yang berarti Anda dapat membuat variabel dengan lingkungan lokal atau global, mengubah variabel menggunakan JavaScript, dan mengubah variabel berdasarkan media query.

Satu cara yang baik untuk menggunakan variabel CSS melibatkan warna desain. Anda dapat menempatkannya di variabel, tanpa harus menyalin dan menempel warna yang sama berulang-ulang.

Cara Tradisional

Contoh di bawah ini menunjukkan cara tradisional untuk mendefinisikan beberapa warna di dalam gaya tabel (dengan mendefinisikan warna yang akan digunakan untuk setiap elemen khusus):

Contoh

body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}
button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

Coba Sendiri

Syarat penulisan fungsi var()

Fungsi var() digunakan untuk memasukkan nilai variabel CSS.

Syarat penulisan fungsi var() adalah sebagai berikut:

var(name, value)
Nilai Deskripsi
name Wajib. Nama variabel (dibuka dengan dua garis bawah).
value Pilihan. Nilai cadangan (digunakan saat variabel tidak ditemukan).

Keterangan:Nama variabel harus dimulai dengan dua garis bawah (--) dan berbeda huruf besar/kecil!

Bagaimana cara kerja var()

Pertama: Variabel CSS dapat memiliki lingkungan global atau lokal.

Variabel global dapat diakses/gunakan di seluruh dokumen, sedangkan variabel lokal hanya dapat digunakan di dalam selector yang mendeklarasikannya.

Untuk membuat variabel dengan lingkungan global, deklarasikan di selector :root. Selector :root cocok dengan elemen akar dokumen.

Untuk membuat variabel dengan lingkungan lokal, deklarasikan di selector yang akan digunakan untuk variabel itu.

Contoh di bawah ini sama seperti contoh di atas, tetapi di sini kita menggunakan fungsi var().

Pertama, kami menyatakan dua variabel global (--blue dan --white). kemudian, kami menggunakan fungsi var() untuk memasukkan nilai variabel kemudian di dalam gaya tabel:

Contoh

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

Coba Sendiri

Ada beberapa keunggulan menggunakan var():

  • Membuat kode lebih mudah dibaca (lebih mudah dipahami)
  • Membuat perubahan nilai warna lebih mudah

Untuk mengubah warna biru dan putih menjadi biru dan putih yang lebih lembut, Anda hanya perlu mengubah nilai variabel dua:

Contoh

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Coba Sendiri

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini penuh.

Fungsi
var() 49.0 15.0 31.0 9.1 36.0

Fungsi var() CSS

Fungsi Deskripsi
var() Masukkan nilai variabel CSS.