Apa itu Variabel CSS dan Bagaimana Cara Menggunakannya

Diterbitkan: 2022-02-16

Saat menulis kode CSS untuk situs Anda, Anda dapat menggunakan Properti Kustom (Variabel) CSS untuk mempercepat proses pengembangan. Anda dapat menggunakan variabel untuk menentukan properti (ukuran, warna), yang kemudian dapat diterapkan ke beberapa elemen.

Dengan begitu, dimungkinkan untuk memiliki kontrol lebih besar atas kode dan desain. Mengubah nilai variabel di satu tempat mengesampingkan nilai properti itu di mana pun ia dipanggil.

Posting ini akan menjelaskan cara menggunakan Variabel CSS dan beberapa aplikasi praktis.

Ayo mulai!

Mendeklarasikan Variabel

Variabel dapat memiliki lingkup global atau lokal. Untuk mendefinisikan variabel secara global, Anda menggunakan :root selector.

 :root { --base-font-size: 1.1rem; }
BUKA DI POPUP
 :root { --base-font-size: 1.1rem; }

Pemilih :root cocok dengan akar dokumen, yaitu <html> dalam kasus khusus kami.

Untuk mendeklarasikan Properti Kustom CSS (Variabel), Anda mulai dengan dua tanda hubung (--). Variabel peka huruf besar/kecil, misalnya:

--base-font-size dan --Base-Font-Size adalah dua variabel yang berbeda.

Untuk mendefinisikan variabel secara lokal, Anda menggunakan pemilih elemen di mana Anda ingin menggunakan variabel tersebut.

 #first-container { --background: #ccc; }
BUKA DI POPUP
 #first-container { --background: #ccc; }

Setelah Anda mendefinisikan variabel, Anda perlu memanggilnya.

Fungsi var()

Fungsi var() digunakan untuk menyisipkan nilai Variabel CSS yang ditentukan. Fungsi menggantikan dirinya dengan nilai variabel. Mari kita lihat sebuah contoh:

Kode HTML

  • Salin dan tempel kode ini ke editor kode Anda.
  • Simpan file sebagai index.html .
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html>
BUKA DI POPUP
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html>

Apa itu Variabel CSS dan Bagaimana Cara Menggunakannya

Kode CSS

  • Buat file bernama style.css (dalam direktori yang sama dengan index.html ).
  • Rekatkan kode di bawah ini dan simpan file.
 /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
 border-radius: 5px; }
BUKA DI POPUP
 /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
 border-radius: 5px; }

Apa itu Variabel CSS dan Bagaimana Cara Menggunakannya

Ada beberapa hal yang perlu diperhatikan di sini:

  1. Membuat palet warna adalah proses yang mudah.
  2. Dimungkinkan untuk menggunakan variabel di dalam definisi variabel lain, seperti warna dalam definisi variabel batas.
  3. Variabel diwarisi, properti warna dari elemen .container-* mempengaruhi turunan langsungnya. Dalam hal ini, elemen <p>.

Untuk mengganti variabel, Anda mendeklarasikannya di dalam wadahnya, membuatnya lebih spesifik.

  • Mengedit kode CSS:
 button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; }
BUKA DI POPUP
 button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; }

Apa itu Variabel CSS dan Bagaimana Cara Menggunakannya

Variabel dan Media Query

Variabel juga dapat diwarisi dan diganti dalam kueri media CSS.

  • Tambahkan kode ini ke variabel:
 :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }
BUKA DI POPUP
 :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }

Kami telah mendefinisikan lebar dasar untuk elemen pembungkus. Kita sekarang dapat menerapkan variabel-variabel ini ke properti lebar .wrapper.

  • Tambahkan kode ini di akhir file CSS:
 .wrapper { width: var(--wrapper-width);
 margin: 0 auto; }
BUKA DI POPUP
 .wrapper { width: var(--wrapper-width);
 margin: 0 auto; }

Apa itu Variabel CSS dan Bagaimana Cara Menggunakannya

Untuk menentukan kueri media untuk perangkat dengan lebar layar kurang dari 1100 piksel, kami menulis kueri media berikut.

  • Mengedit kode CSS:
 @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } }
BUKA DI POPUP
 @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } }

Apa itu Variabel CSS dan Bagaimana Cara Menggunakannya

Apa itu Variabel CSS dan Bagaimana Cara Menggunakannya

Definisi variabel baru di dalam kueri media menggantikan nilainya. Perhatikan juga, bahwa variabel tersedia di DOM, yang berarti, variabel tersebut dapat diambil dan dimanipulasi dengan JS. Itu tidak mungkin dengan variabel dalam praprosesor CSS.

Ringkasan

Variabel berguna untuk mengatur dan mengelola CSS dalam jumlah kecil dan besar. Mereka mengurangi pengulangan dan karena itu mencegah kesalahan. Variabel CSS bersifat dinamis, artinya dapat diubah saat runtime. Sangat mudah untuk membuat tema situs atau aplikasi secara dinamis dengan variabel CSS. Mereka memberikan kemampuan untuk menetapkan nilai ke properti CSS dengan nama yang disesuaikan. Variabel mengikuti aturan cascading standar, sehingga dimungkinkan untuk mendefinisikan properti yang sama pada tingkat kekhususan yang berbeda.

Saya harap Anda menyukai tutorial ini. Terima kasih sudah membaca!