Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS Latar Belakang CSS Batas CSS Margin CSS Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS Teks CSS Font CSS Ikon CSS Tautan CSS Daftar CSS Tabel CSS Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS Bayangan CSS Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Variabel CSS - Fungsi var()


Variabel CSS

Fungsi var()ini digunakan untuk memasukkan nilai dari variabel CSS.

Variabel CSS memiliki akses ke DOM, yang berarti Anda dapat membuat variabel dengan cakupan lokal atau global, mengubah variabel dengan JavaScript, dan mengubah variabel berdasarkan kueri media.

Cara yang baik untuk menggunakan variabel CSS adalah dalam hal warna desain Anda. Alih-alih menyalin dan menempelkan warna yang sama berulang kali, Anda dapat menempatkannya dalam variabel.


Cara Tradisional

Contoh berikut menunjukkan cara tradisional untuk mendefinisikan beberapa warna dalam lembar gaya (dengan menentukan warna yang akan digunakan, untuk setiap elemen tertentu):

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;
}


Sintaks Fungsi var()

Fungsi var()ini digunakan untuk memasukkan nilai dari variabel CSS.

Sintaks var()fungsinya adalah sebagai berikut:

var(--name, value)
Value Description
name Required. The variable name (must start with two dashes)
value Optional. The fallback value (used if the variable is not found)

Catatan: Nama variabel harus dimulai dengan dua tanda hubung (--) dan peka huruf besar/kecil!



Bagaimana var() Bekerja

Pertama-tama: Variabel CSS dapat memiliki cakupan global atau lokal.

Variabel global dapat diakses/digunakan melalui seluruh dokumen, sedangkan variabel lokal hanya dapat digunakan di dalam pemilih di mana ia dideklarasikan.

Untuk membuat variabel dengan cakupan global, deklarasikan di dalam :root pemilih. Pemilih :rootcocok dengan elemen akar dokumen.

Untuk membuat variabel dengan cakupan lokal, deklarasikan di dalam pemilih yang akan menggunakannya.

Contoh berikut ini sama dengan contoh di atas, tetapi disini kita menggunakan var()fungsi.

Pertama, kita mendeklarasikan dua variabel global (--blue dan --white). Kemudian, kami menggunakan var()fungsi untuk memasukkan nilai variabel nanti di lembar gaya:

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;
}

Keuntungan menggunakan var() adalah:

  • membuat kode lebih mudah dibaca (lebih dimengerti)
  • membuatnya lebih mudah untuk mengubah nilai warna

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

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;
}


Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung var()fungsi tersebut.

Function
var() 49.0 15.0 31.0 9.1 36.0

CSS var() Fungsi

Property Description
var() Inserts the value of a CSS variable