Variabel CSS, juga dikenal sebagai properti khusus, membantu Anda meminimalkan pengulangan di style sheet Anda. Ini, pada gilirannya, membantu Anda menghemat waktu dan tenaga saat membuat perubahan pada desain Anda. Anda juga dapat yakin bahwa Anda tidak akan melewatkan nilai apa pun yang perlu Anda perbarui.
Akses ke DOM memungkinkan Anda membuat variabel, menyimpannya, dan menggunakannya kembali di seluruh style sheet Anda.
Cara Mendefinisikan dan Menggunakan Variabel CSS
Untuk membuat style sheet Anda lebih teratur, dapat dipelihara, dan dapat digunakan kembali, Anda dapat menggunakan variabel CSS di properti apa pun yang menerima nilai.
Ambil contoh file HTML dan file CSS berikut yang tidak menggunakan variabel CSS.
HTML:
html>
<htmllang="en">
<kepala>
<judul>Variabel CSS - Variasi Tomboljudul>
<tautanrel="lembar gaya"href="Variabel.css" />
kepala>
<tubuh>
<div>
<h1>Variabel CSSh1>
<div>
CSS:
.btn {
lapisan: 1rem 1.5rem;
latar belakang: transparan;
font-berat: 700;
warna merah;
}
Seperti inilah tampilan halaman Anda:
Itu .btn kelas yang digunakan dalam style sheet di atas tidak dinamis dan menyebabkan Anda membuat kelas terpisah untuk menyesuaikan masing-masing tombol. Membuat situs web yang indah mengharuskan Anda menjadi dinamis dengan gaya front-end Anda. Menerapkan tombol dengan cara ini hanya akan membuat tugas itu sulit dicapai.
Seperti kebanyakan bahasa pemrograman, Anda harus menginisialisasi dan mengganti variabel CSS.
Untuk menginisialisasi variabel CSS, awali nama variabel dengan tanda hubung ganda:
:akar{
/*variabel CSS*/
--nama_variabel: nilai;
}
Anda dapat menginisialisasi variabel di mana saja tetapi perhatikan bahwa Anda hanya dapat menggunakan variabel tersebut di dalam pemilih yang diinisialisasi. Karena itu, variabel CSS secara konvensional diinisialisasi di dalam pemilih root. Ini menargetkan elemen DOM tingkat tertinggi dan memungkinkan variabel dapat diakses oleh seluruh dokumen HTML dalam skala global.
Untuk mengganti variabel ke dalam gaya CSS Anda, Anda akan menggunakan var() Properti:
:akar {
/*variabel CSS*/
--utama: #900c3f;
--sekunder: #ff5733;
}.btn {
lapisan: 1rem 1.5rem;
latar belakang: transparan;
font-berat: 700;
warna: var(--utama);
warna latar belakang: var(--sekunder);
}
.sub-primer {
warna: var(--sekunder);
warna latar belakang: var(--utama);
}
Pemilih root berisi dua variabel: --utama Dan --sekunder. Kedua variabel tersebut kemudian disubstitusikan ke dalam .btn kelas sebagai warna dan warna latar belakang masing-masing.
Dengan menggunakan variabel, Anda dapat menata elemen individual dengan lebih mudah. Dengan menggunakan kembali variabel, Anda dapat dengan cepat mengubah nilai satu kali untuk memperbaruinya di setiap contoh.
Itu var() properti juga dapat mengambil argumen kedua. Argumen ini bertindak sebagai nilai fallback untuk argumen pertama dalam situasi di mana yang pertama tidak ditentukan atau tidak valid.
Misalnya:
:akar {
--utama: #900c3f;
--sekunder: #ff5733;
}
.btn {
lapisan: 1rem 1.5rem;
latar belakang: transparan;
font-berat: 700;
warna: var(--primer, biru);
}
Dalam contoh ini, gantikan dengan --utama variabel ke dalam warna gaya. Jika karena suatu alasan, nilai ini gagal, style sheet akan menggunakan nilai kedua sebagai fallback. Anda juga dapat menggunakan variabel CSS lain sebagai nilai fallback.
Memanipulasi dan Mengganti Variabel CSS Dengan JavaScript
Memanipulasi variabel CSS menggunakan JavaScript dapat menjadi cara ampuh untuk mengubah tampilan dan nuansa situs web Anda dengan cepat. Dengan menggunakan JavaScript, Anda dapat memperbarui nilai variabel ini dan melihat perubahan yang tercermin di situs Anda.
Penting untuk diperhatikan bahwa perubahan yang dilakukan dengan JavaScript hanya akan berlaku untuk sesi saat ini. Anda harus memperbarui sumber aslinya atau simpan nilai baru pada klien, seperti di cookie, untuk mempertahankan perubahan.
Berikut adalah contoh cara menggunakan JavaScript untuk memperbarui nilai variabel CSS.
HTML:
html>
<htmllang="en">
<kepala>
<judul>Variabel CSS - Variasi Tomboljudul>
<tautanrel="lembar gaya"href="Variabel.css" />
<naskah>
fungsiganti warna() {
// Dapatkan elemen yang ingin Anda ubah variabelnya
const elemen saya = dokumen.querySelector(":akar");// Dapatkan nilai variabel saat ini
membiarkan currentValue = getComputedStyle (myElement).getPropertyValue(
"--sekunder"
);
// Mengatur itu barunilaiuntuk itu variabel
elemen saya.gaya.setProperti("--sekunder", "#DAF7A6");
}
naskah>
kepala>
<tubuh>
<div>
<h1>Variabel CSSh1>
<div>
CSS:
:akar {
--utama: #900c3f;
--sekunder: #ff5733;
}.btn {
lapisan: 1rem 1.5rem;
latar belakang: transparan;
font-berat: 700;
}
.sub-primer {
warna: var(--utama);
warna latar belakang: var(--sekunder);
}
Dalam kode JavaScript ini, file ganti warna() fungsi memperbarui warna tombol pertama saat pengguna mengkliknya.
Menggunakan Metode traversal DOM, Anda dapat mengakses kelas atau pemilih yang diterapkan di dokumen HTML Anda dan memanipulasi nilainya.
Sebelum mengklik tombol:
Setelah mengklik tombol:
Anda juga dapat menggunakan JavaScript untuk membuat variabel CSS baru atau menghapus semuanya.
Misalnya:
// Membuat A baruvariabel
dokumen.documentElement.style.setProperty('--baru-warna', 'biru');
// Hapus variabel
dokumen.documentElement.style.removeProperty('--baru-warna');
Menggunakan Variabel CSS Dengan Preprosesor
Menggunakan variabel dalam teknologi frontend awalnya dicapai dengan preprosesor CSS seperti SASS, KURANG, dan Stylus.
Tujuan preprosesor CSS adalah untuk mengembangkan kode yang memperluas kemampuan dasar CSS standar. Kemudian minta kode itu dikompilasi ke dalam CSS standar untuk dipahami oleh browser, seperti bagaimana TypeScript bekerja dengan JavaScript.
Dengan pengembangan variabel CSS, preprosesor tidak lagi penting, tetapi mereka masih menawarkan beberapa kegunaan jika digabungkan dengan variabel CSS dalam proyek Anda.
Anda dapat menentukan variabel SASS $warna utama dan menggunakannya untuk mengatur nilai variabel CSS. Kemudian, gunakan variabel CSS di kelas gaya biasa.
Anda juga dapat menggunakan fungsi SASS untuk memanipulasi nilai variabel CSS.
Misalnya:
:akar {
--primer: $main-color;
--sekunder: meringankan(var(--utama), 20%);
}
.btn {
warna: var(--utama);
warna latar belakang: var(--sekunder);
}
Di sini, fungsi SASS meringankan() memanipulasi nilai dari --utama untuk mendapatkan nilai untuk --sekunder.
Perhatikan bahwa variabel SASS tidak dapat diakses oleh JavaScript. Jadi jika Anda perlu memanipulasi nilai variabel Anda saat runtime, Anda harus menggunakan variabel CSS.
Dengan menggunakan variabel CSS dan preprosesor secara bersamaan, Anda dapat memanfaatkan kedua manfaat tersebut, seperti menggunakan fitur preprocessor yang kuat seperti loop dan fungsi dan fitur variabel CSS seperti CSS mengalir.
Tips Menggunakan Variabel CSS dalam Pengembangan Web
Berikut adalah beberapa tips penting untuk diperhatikan yang akan membantu Anda memanfaatkan variabel CSS dengan lebih baik.
Mulailah Dengan Konvensi Penamaan yang Jelas
Pilih konvensi penamaan untuk variabel Anda yang membuatnya mudah dipahami dan digunakan. Misalnya, gunakan awalan seperti --warna- untuk variabel warna atau --jarak- untuk variabel spasi.
Gunakan variabel dalam kueri media untuk memudahkan penyesuaian desain Anda untuk ukuran layar yang berbeda.
Manfaatkan Sifat Kaskade CSS
Ingatlah bahwa variabel CSS bersifat kaskade, artinya jika Anda menetapkan variabel pada elemen induk, itu akan memengaruhi semua turunannya.
Gunakan Variabel CSS Dengan Hati-hati
Menggunakan terlalu banyak Variabel CSS dapat menyebabkan kebingungan, jadi gunakan dengan hati-hati, dan hanya jika masuk akal dan meningkatkan pemeliharaan kode Anda.
Uji Variabel Anda
Variabel CSS adalah cara unik untuk menulis kode yang jelas dan dapat dipelihara dalam style sheet Anda.
Penting untuk dicatat bahwa mereka masih belum sepenuhnya didukung di semua browser. Oleh karena itu, Anda harus menguji variabel Anda untuk kompatibilitas browser untuk memastikan bahwa mereka berfungsi seperti yang diharapkan dan bahwa setiap nilai fallback berfungsi seperti yang Anda harapkan.