Pada tutorial kali ini anda akan belajar dan memahami bagaimana cara menggunakan css variable dan beserta implementasinya.
jika anda menggunakan CSS processor seperti SASS atau less pastinya anda akan merasa terbantu dengan adanya fitur CSS variable. Karena kita dapat mendefinisikan terlebih dahulu value-value yang akan sering dipakai kedalam variable. Lalu menggunakan variable tersebut dalam style yang anda kerjakan.
Keuntungannya adalah ketika anda ingin merubah value tersebut, anda hanya tinggal mengupdate nilai dari variable tertentu tanpa harus mengupdatenya satu persatu.
Tapi yang menjadi kekurangannya adalah kita harus mengcompile file SASS/Less kita agar bisa digunakan di browser. Pada tutorial kali ini, saya akan memperkenalkan CSS Custom Properties atau lebih dikenal dengan CSS Variable. Yap, yang ini variable asli bawaan CSS 
Sebelumnya kita harus kenal dulu dengan css variable , apa itu css variable ? nama resminya adalah CSS Custom Properties , ini adalah sebuah properties biasa jika kalian pernah membuat variable-variable bedanya kalau kita menggunakan css variable pada css Preprocessor untuk kali ini kita memerlukanya , kita biusa langsung deklarasi pada 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 pendeklarasianya yaitu global dan local, contohnya seprti ini :
:root{
--primary-color: #03A9F4;
--accent-color: #FF4081;
--base-font-size: 12px;
}:root adalah pendeklarasian secra global agar bisa di akses di manapun
.card{
--card-background: #FEFEFE;
}sementara itu kita juka bisa menulis langsung secara lokal pada selector tetapi syaratnya variable tersebut hanya bisa di akses oleh selector tersebut beserta turunanya saja.
implentasinya 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>Dalam gugatan yang didaftarkan di pengadilan California, Apple menuding Qualcomm berlebihan dalam 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 maka hasilnya akan seperti ini :
oke itulah penjelasan beserta implementasi dari bagaimana cara menggunakan css variable , semoga bisa menambah wawasan kalian dan sampai bertemu pada artikel selanjutnya.
The post Bagaimana Cara Menggunakan CSS Variable appeared first on Kursus Website Terbaik.