Bagaimana Cara Menggunakan CSS Variable
Di panduan kali ini sahabat akan belajar dan memahami bagaimana cara menggunakan css variable dan dan juga implementasinya.
Sekiranya sahabat menggunakan CSS processor seperti SASS atau less pastinya sahabat akan merasa terbantu dengan adanya fitur CSS variable. Karena kita dapat mendefinisikan terlebih dahulu value-value yang akan sering diaplikasikan kedalam variable. Lalu menggunakan variable tersebut pada style yang sahabat kerjakan.
Keuntungannya ialah ketika sahabat ingin merubah value tersebut, sahabat hanya tinggal mengupdate nilai dari variable tertentu tanpa mesti mengupdatenya satu persatu.
akan tetapi yang menjadi kekurangannya ialah kita mesti mengcompile file SASS/Less kita agar dapat digunakan di browser. Di panduan kali ini, saya akan memberi tahu CSS Kembangkan Properties atau lebih dikenal dengan CSS Variable. Yap, yang ini variable asli bawaan CSS š
Sebelumnya kita mesti kenal dulu dengan css variable , apa itu css variable ? nama resminya ialah CSS Kembangkan Properties , ini ialah sebuah properties lazimnya bila kalian pernah membangun variable-variable bedanya kalau kita menggunakan css variable di css Preprocessor bagi kali ini kita memerlukannya, kita dapat seketika deklarasi di css kita.
Cara deklarasinya :
kita hanya perlu menambahkan –(double dash/strip) sebelum nama variable. misal
--primary-color: #03A9F4;
--accent-color: #FF4081;
--base-font-size: 12px;
lalu dimana lokasi deklarasinya ?
ada dua lokasi pendeklarasiannya yaitu global dan local, contohnya seperti ini :
:root{
--primary-color: #03A9F4;
--accent-color: #FF4081;
--base-font-size: 12px;
}:root ialah pendeklarasian secara global agar dapat di akses di manapun
.card{
--card-background: #FEFEFE;
}selain itu kita bila dapat menulis seketika secara lokal di selector tetapi syaratnya variable tersebut hanya dapat di akses oleh selector tersebut dan juga turunannya saja.
Mengimplementasikannya seperti ini :
<html>
<head>
<title></title>
<style>
:root{
--primary-color : deeppink;
--seconde-color : #fff;
}
.element{
width : 500px;
margin: auto;
background: var(--primary-color);
}
p{
color: var(--seconde-color)
}
h1{
text-align: center;
}
</style>
</head>
<body>
<div class=element>
<h1>CSS Variable</h1>
<p>Pada gugatan yang didaftarkan di pengadilan California, Apple menuding Qualcomm berlebihan pada memasang harga chipnya serta menolak membayarkan janji potongan harga sebesar USD 1 miliar. Penundaan itu dilakukan Qualcomm terkait diskusi yang dilakukan Apple dengan regulator anti monopoli Korea Selatan, Korea Fair Trade Commision.</p>
</div>
</body>
</html>
setelah di jalankan karenanya hasilnya akan seperti ini :
oke begitulah penjelasan dan juga implementasi dari bagaimana cara menggunakan css variable , semoga dapat menambah pengetahuan kalian dan hingga bertemu di artikel berikutnya.
Sumber https://kursuswebsite.org
