Panduan Cepat Variabel CSS (Gunakan Kasus, Sintaks, dan Contoh)

Saya telah bereksperimen dengan variabel CSS untuk beberapa waktu sekarang. Jika Anda belum mendekati mereka, Anda dapat menggunakan panduan singkat ini untuk dengan cepat menemukan jalan keluar dan mulai bekerja.

Apa ini

Contoh aplikasi sederhana untuk tombol dengan cakupan

Variabel CSS memungkinkan Anda untuk menentukan nilai yang dapat digunakan kembali dalam CSS.

Mereka muncul sejak lama. Baru-baru ini, mereka mulai mendapatkan popularitas karena dukungan browser yang lebih luas.

Jika Anda menggunakan preprocessor, seperti SASS, maka Anda sudah terbiasa dengan variabel. Sekarang Anda dapat melakukan hal yang sama tanpa preprocessor.

Mengapa menggunakan variabel gaya?

Variabel memungkinkan kita untuk mematuhi prinsip KERING (jangan ulangi sendiri). Berkat mereka, kami juga memiliki cara untuk membuat titik referensi tunggal untuk nilai duplikat. Jika Anda menggunakan preprosesor, maka, kemungkinan besar, keuntungan dari pendekatan ini sudah akrab bagi Anda. Paling sering, ini digunakan untuk mengatur warna dasar, yang digunakan untuk banyak elemen.


Ulangi warna latar belakang untuk banyak pemilih

Dalam cuplikan di atas, nilai #e74c3c dapat dan harus berupa variabel. Jika kita membuat variabel dari nilai ini, kita mendapatkan satu titik yang bisa direferensikan. Ini mengurangi risiko bug dan masalah gaya, karena memfasilitasi pemeliharaan lebih lanjut.


Membuat titik referensi menggunakan variabel

Dalam cuplikan kedua, saya menggunakan preprocessor untuk menunjukkan bagaimana Anda dapat menggunakan variabel untuk nilai background-color .

Mengapa tidak menggunakan variabel preprosesor alih-alih variabel CSS asli?

Pertanyaan yang bagus Dalam kebanyakan kasus, Anda akan lebih memilih untuk tetap berkomitmen pada variabel preprosesor. Ini terjadi jika Anda sudah menggunakannya. Tapi Anda bisa memanfaatkan kedua pendekatan sekaligus. Ini menjadi relevan ketika menjadi perlu untuk sepenuhnya memanfaatkan kemampuan variabel CSS asli. Lebih lanjut tentang ini nanti.

Variabel CSS asli harus digunakan ketika:

1. Anda tidak memiliki preprosesor atau Anda tidak menggunakannya.
2. Anda ingin memanfaatkan variabel CSS asli.

Manfaat Utama Variabel CSS Asli

Menurut pendapat saya, variabel CSS asli memiliki dua keuntungan besar.

Yang pertama. Mereka diperbarui saat runtime! Mereka dapat dikontrol menggunakan kueri media, status, atau bahkan JavaScript. Browser akan menerapkan perubahan yang dilakukan. Ini membuka banyak kemungkinan.

Selain itu, variabel CSS memungkinkan untuk ruang lingkup. Ini berarti bahwa, misalnya, Anda bisa mengubah gaya atau perilaku elemen dengan memperbarui nilai suatu variabel. Jika tidak, Anda harus mendaftarkan gaya baru untuk elemen ini dari awal. Akibatnya, volume CSS pada output berkurang.

Bukan sintaks yang paling indah

Mari kita lihat sebuah contoh.



Apa itu :root pseudo? Semuanya logis: itu adalah pseudo-selector dari root pohon. Selector :root dapat digunakan untuk mendefinisikan variabel global. Dalam kasus ini, kami mendefinisikan nilai rebeccapurple untuk variabel --primary .



Untuk mendefinisikan variabel, dua tanda hubung digunakan sebagai awalan.



Untuk menggunakan variabel, kita membutuhkan fungsi var .

Dan apa yang terjadi ketika kita merujuk ke variabel yang nilainya tidak disetel? Dalam hal ini, Anda dapat mengatur nilai fallback atau nilai default. Fungsi var mendukung parameter opsional kedua, yang terkait dengan nilai fallback atau nilai default.



Cuplikan ini menetapkan gaya sumber untuk tag button . Jika memungkinkan untuk background-color , nilai --btn-color . Jika variabel tidak ada atau nilainya tidak disetel, nilai - --primary .

Tidak perlu menggunakan variabel untuk mundur kami. Anda dapat mengambil nilainya. Tetapi dengan variabel akan lebih mudah untuk menerapkan dukungan kode.

Perhatikan bahwa tidak ada gaya yang dideklarasikan untuk button.btn . Sebaliknya, nilainya diperbarui. Sekarang tepat untuk melanjutkan ke kaskade dan ruang lingkup.

Cascading dan Cakupan

Ketika bekerja dengan variabel, cascading diperhitungkan, serta ruang lingkup variabel. Pada contoh sebelumnya, variabel dideklarasikan di :root pseudo- :root . Semua variabel di pemilih :root memiliki cakupan global.

Dalam satu contoh di atas --primary tersedia untuk semua penyeleksi. Karena ruang lingkup, nilai ini dapat diganti. Misalnya, kami ingin nilai --primary berubah untuk kelas premium .



Dalam fragmen ini, nilai variabel --primary dari elemen kelas premium adalah dodgerblue . Artinya, jika tidak ada kelas yang diterapkan pada button , nilai variabel adalah rebeccapurple . Namun, jika Anda menerapkan kelas premium , warnanya berubah menjadi dodgerblue .

Perlu dicatat bahwa, seperti gaya inline, variabel CSS inline memiliki prioritas tertinggi.



Dalam fragmen ini, warna latar tombol akan diatur ke red , meskipun fakta bahwa kelas premium digunakan di sini. Ini terjadi karena nilai --primary dijelaskan secara langsung di dalam tag.

Manajemen nilai

Anda dapat mengontrol nilai variabel CSS menggunakan aturan CSS lainnya. Pendekatan utama adalah pertanyaan media dan perubahan status.

Misalnya, nilai variabel dapat berubah ketika lebar layar melebihi nilai tertentu.



Perubahan akan memulai redraw browser dan menunjukkan hasilnya kepada pengguna.

Dalam hal ini, gradien latar belakang akan berubah jika lebarnya melebihi 768px .

Bagaimana cara mengelola variabel menggunakan status? Misalnya, ambil button . Variabel CSS akan diperbarui berdasarkan status button .



Dalam hal ini, Anda dapat menyesuaikan gaya tombol berdasarkan pada status :active .

Mengelola Nilai Menggunakan JavaScript

Mengelola variabel dari CSS sangat mudah. Tetapi untuk benar-benar mendapatkan kendali atas mereka, Anda harus mengontrolnya menggunakan JavaScript. Untungnya, ini nyata.

Metode setProperty memungkinkan setProperty untuk mengatur dan mengelola variabel gaya elemen.



Bagaimana cara memperbarui set variabel di :root pseudo- :root ? Pertanyaan yang bagus Anda perlu mengatur properti documentElement untuk documentElement .



Saat Anda dapat memanipulasi variabel CSS dengan cara ini, ada banyak kemungkinan. Ingin tahu tentang melacak posisi kursor dengan acara mousemove .

Menggunakan calc () dan membuang unit

Cobalah untuk tidak menggunakan unit dalam variabel. Ini akan memudahkan perawatan lebih lanjut.



Fungsi calc() memungkinkan Anda untuk menormalkan dan menetapkan nilai dengan unit yang diinginkan.



Variabel CSS bahkan dapat digunakan untuk menyimpan informasi tentang unit yang disukai. Untuk kejelasan, kami mengambil "1px" dalam fragmen, tetapi Anda dapat menggantinya dengan "1pt", "1rem", dll.

Kurangnya unit biasanya lebih relevan ketika nilai ditetapkan dari JavaScript. Saat memproses nilai murni, skrip kami abstrak dari CSS. Sambungan terputus.



Ketika unit terkandung dalam CSS, layanan juga melewati CSS.

Contoh aplikasi

Saya masih mempelajari berbagai contoh penggunaan variabel CSS. Pertama-tama, tema dinamis muncul di pikiran. Melacak kursor dan menggulir layar juga merupakan aplikasi yang menarik. Saya sudah menyiapkan materi pelatihan, yang dapat ditemukan di bawah.

Contoh dengan anjing dan bola

Mari kita bekerja bersama satu contoh!



Di sini kita cukup melacak posisi kursor dan memperbarui posisi dua emoji.



Hal utama di sini adalah untuk mentransfer emoji dari titik pusat menggunakan translate dan pada saat yang sama menerapkan transition-delay untuk anjing

Bagaimana cara memperbarui situasi? Menggunakan variabel untuk --y dan --y .



Bagaimana cara membuat anjing ketinggalan? transition-delay diterapkan. Efek perlambatan yang kompleks juga dapat dicapai dengan menggunakan transition-timing-function .



Tetap hanya memperbarui variabel-variabel ini untuk mousemove .



Itu saja. Beberapa perbaikan kecil lagi, dan sesuatu seperti itu ternyata:

Kekurangan

Sejauh ini, bekerja dengan variabel CSS telah berjalan cukup lancar. Saya jarang menemui situasi di mana sesuatu tidak berhasil. Berikut adalah beberapa kemungkinan yang ingin saya lihat untuk variabel CSS.

1. Animasi variabel. Pada artikel ini, saya tidak berbicara tentang animasi sama sekali. Anda dapat menggunakan variabel untuk itu. Tetapi animasi dari nilai-nilai itu sendiri tidak dapat dilakukan.
2. Variabel CSS tidak dapat digunakan dalam penyeleksi. Ini logis, tetapi akan lebih bagus jika tingkat interpolasi seperti itu tersedia. Menggunakan variabel dalam pemilih n-child akan menjadi keren.

Kesimpulan

Saya suka bekerja dengan variabel CSS. Semakin saya melakukannya, semakin banyak contoh aplikasi yang muncul di benak saya.

Berkat artikel ini, Anda sendiri dapat mulai mempelajari variabel CSS.

Jika Anda tertarik untuk mendapatkan ikhtisar variabel CSS yang lebih rinci, lihat video ini.

MENCARI. RUMAH - proyek ini mengumpulkan lebih dari 150 titik pandang kaca di 40 negara. Anda dapat dengan cepat menjalankan perintah host, ping, traceroute, dan mtr.