Sebagian besar situs web menggunakan CSS untuk memoles tampilan dan gaya komponen halaman web yang berbeda. CSS, atau Cascading Style Sheet, secara teknis bukan bahasa pemrograman. Namun, CSS dapat digunakan dengan bahasa pemrograman seperti JavaScript untuk membuat halaman web yang responsif dan interaktif.
Jika Anda telah menggunakan bahasa pemrograman, seperti JavaScript, Anda tahu bahwa Anda dapat mendeklarasikan variabel, menetapkan nilainya, dan menggunakannya kembali di berbagai bagian kode Anda. Kabar baiknya adalah Anda dapat menerapkan konsep yang sama di CSS.
Artikel ini akan mendefinisikan variabel CSS, menjelaskan manfaatnya, dan menunjukkan cara mendeklarasikan dan menggunakan variabel dalam CSS.
Apa itu Variabel dalam CSS?
Variabel CSS adalah properti khusus yang memungkinkan developer web menyimpan nilai yang dapat digunakan kembali melalui stylesheet. Misalnya, Anda dapat mendeklarasikan gaya font, warna latar belakang, dan ukuran font yang dapat Anda gunakan kembali dengan elemen seperti judul, paragraf, dan div di basis kode Anda.
Mengapa menggunakan variabel CSS? Ini dia beberapa alasannya;
- Mempermudah memperbarui kode: Setelah mendeklarasikan variabel, Anda dapat menggunakan kembali seluruh lembar gaya tanpa memperbarui setiap elemen secara manual.
- Mengurangi pengulangan: Saat basis kode Anda berkembang, Anda akan menemukan bahwa Anda memiliki kelas dan elemen yang serupa. Alih-alih menulis kode CSS untuk setiap item, Anda cukup menggunakan variabel CSS.
- Membuat kode Anda lebih mudah dipelihara: Pemeliharaan kode penting jika Anda ingin bisnis Anda berkelanjutan.
- Meningkatkan keterbacaan: Dunia modern mendorong kolaborasi. Menggunakan variabel dalam CSS menghasilkan basis kode ringkas yang dapat dibaca.
- Konsistensi mudah dipertahankan: Variabel CSS dapat membantu Anda mempertahankan gaya yang konsisten saat kode sumber bertambah atau ukuran aplikasi bertambah. Misalnya, Anda dapat mendeklarasikan margin, padding, gaya font, dan warna yang akan digunakan di tombol Anda di seluruh situs web.
Cara Mendeklarasikan Variabel di CSS
Karena Anda tahu apa itu variabel dalam CSS dan mengapa Anda harus menggunakannya, kita dapat melanjutkan dan mengilustrasikan cara mendeklarasikannya.
Untuk mendeklarasikan variabel CSS, mulailah dengan nama elemen, lalu tulis dua tanda hubung (–), nama dan nilai yang diinginkan. Sintaks dasarnya adalah;
element {
--variable-name: value;
}
Misalnya, jika Anda ingin menerapkan padding di seluruh dokumen, Anda dapat mendeklarasikannya sebagai;
body {
--padding: 1rem;
}
Lingkup Variabel dalam CSS
Variabel CSS dapat dicakup secara lokal (dapat diakses dalam elemen tertentu) atau secara global (dapat diakses di seluruh style sheet).
Variabel lokal
Variabel lokal ditambahkan ke pemilih tertentu. Misalnya, Anda dapat menambahkannya ke tombol. Ini adalah sebuah contoh;
.button {
--button-bg-color: #33ff4e;
}
Variabel warna latar belakang tersedia pada pemilih tombol dan turunannya.
Variabel global
Setelah dideklarasikan, Anda dapat menggunakan variabel global dengan elemen apa pun dalam kode Anda. Kami menggunakan :root pseudo-class untuk mendeklarasikan variabel global. Beginilah cara kami mendeklarasikannya;
:root {
--primary-color: grey;
--secondary-color: orange;
--font-weight: 700:
}
Pada kode di atas, Anda dapat menggunakan salah satu variabel yang dideklarasikan dengan elemen yang berbeda, seperti judul, paragraf, div, atau bahkan keseluruhan isi.
Cara menggunakan Variabel di CSS
Kami akan membuat proyek untuk tujuan demonstrasi dan menambahkan file index.html dan styles.css.
Dalam file index.html, kita dapat memiliki div sederhana dengan dua heading ( h1 dan h2) dan sebuah paragraf (p).
<div> <h1>Hello Front-end Dev!!!!</h1> <h2>This is how to use variables in CSS.</h2> <p> Keep scrolling</p> </div>
Di file style.css, kita dapat memiliki yang berikut ini;
:root {
--primary-color: grey;
--secondary-color: orange;
--font-weight: 700:
--font-size: 16px;
--font-style: italic;
}
body {
background-color: var(--primary-color);
font-size: var(--font-size);
}
h1 {
color: var(--secondary-color);
font-style: var(--font-style)
}
h2 {
font-weight: var(--font-weight)
}
p {
font-size: calc(var(--font-size) * 1.2);
}
Saat halaman web dirender, kami akan memiliki yang berikut;
Dari kode di atas, kita telah mendeklarasikan variabel global pada elemen :root. Kita harus menggunakan kata kunci var untuk menggunakan variabel global di salah satu elemen kita. Misalnya, untuk menerapkan warna latar belakang yang kami nyatakan sebagai variabel global, kami menyajikan kode kami sebagai berikut;
warna latar belakang: var(–warna primer);
Periksa semua elemen lainnya, dan Anda akan melihat tren bagaimana kata kunci var diterapkan.
Gunakan Variabel CSS dengan JavaScript
Kami akan menggunakan variabel lokal dan global untuk mengilustrasikan cara menggunakan variabel CSS dengan JavaScript.
Kami dapat menambahkan elemen peringatan ke kode kami yang ada;
Dokumen index.html baru kita akan seperti berikut;
<div> <h1>Hello Front-end Dev!!!!</h1> <h2>This is how to use variables in CSS.</h2> <p> Keep scrolling</p> </div> <div class="alert">Click me!</div>
Kita dapat menata variabel kita. Tambahkan kode berikut ke kode CSS Anda yang sudah ada;
.alert {
--bg-color: red; /* Define local variable */
background-color: var(--bg-color); /* Use the local variable for the background color */
padding: 10px 20px;
border-radius: 4px;
font-weight: var(--font-weight); /*Use the global variable for font weight*/
width: 50px;
}
Kami telah melakukan hal berikut;
- Menentukan variabel lokal di dalam elemen peringatan;
–bg-warna: merah
- Gunakan kata kunci var untuk mengakses variabel lokal ini;
warna latar belakang: var(–bg-warna);
- Menggunakan variabel global yang kami nyatakan sebelumnya sebagai font-weight kami;
font-berat: var(–font-berat);
Tambahkan kode JavaScript
Kita dapat membuat elemen peringatan menjadi responsif; ketika Anda mengkliknya, Anda mendapatkan pop-up di browser Anda yang mengatakan; “Kami telah menggunakan Variabel CSS dengan JavaScript!!!!”.
Kita dapat menambahkan kode JavaScript langsung ke kode HTML dengan melampirkannya menggunakan tag . Kode JavaScript harus muncul setelah kode HTML, tetapi sebelum menutup tag
