CSS3 Variabel

by

Untuk membuat variabel kita menggunakan fungsi var() sebagai custom property.

Ketentuan membuat variabel di css3 adalah:

  • Variabel di tulis di dalam global scope yaitu :root
  • Diawali dengan dua tanda strip / dash --
  • Syntax penulisan variabel: var(nama-variabel, value)
  • nama-variabel diawali dengan --
  • value adalah isi atau nilai dari nama-variabel tersebut
:root {
  --warna-background: red;  
  --ukuran-padding:20px;
}

#contoh {
  background-color: var(--warna-background);
  padding: var(--ukuran-padding);
}

Keterangan:

  • Saya buat dua variabel, yaitu --warna-background dan --ukuran-padding
  • --warna-background memiliki nilai red, dan dipanggil sebagai value dari variabel background. Dipanggil dengan cara var(--warna-background);
  • --ukuran-padding memiliki nilai 20px, dipanggil untuk padding

Leave a Comment