Cara Menggunakan Variable di CSS

27/10/2019 | 77x | CSS,Tutorial

Cara Menggunakan Variable di CSS

Apa ada cara untuk membuat variable di CSS? tentu ada. cara pakainya pun sangat mudah.

Misalnya kita ingin mewarnai sebuah object dengan warna yang sama, kita cukup menulis kode warnanya sekali dan itu disimpan pada variable.

Adapun langkah - langkahnya :

Karena variable pada CSS itu sifatnya global, maka cara deklarasinya ditampung dalam kode :root

Nama variabel harus dimulai dengan dua tanda kurang (--).

:root {
	--biru: #007bff;
}

Selanjutnya, cara memanggil variable tersebut dengan menggunakan fungsi var(). Berikut contohnya

.div_1 {
  background-color: var(--biru);
} 

Cara cukup mudah kan? Coba anda buat satu file html dan jalankan perintah kode html dibawah,

<!DOCTYPE html>
<html>
<head>
<style>
:root {
	--biru: #007bff;
  --merah: red;
  --padding: 3em;
}
.div_1 {
  background-color: var(--biru);
  padding: var(--padding);
}
.div_2 {
  background-color: var(--merah);
  padding: 2em;
}
.div_3 {
  background-color: var(--biru);
  padding: var(--padding);
}
</style>
</head>
<body>
	<div class="div_1">Lorem ipsum</div>
	<div class="div_2">Lorem ipsum</div>
	<div class="div_3">Lorem ipsum</div>
</body>
</html>

Komentar