Memahami variabel CSS (dan cara menggunakannya)

Diterbitkan: 2025-07-13

Variabel CSS seperti bahan desain yang dapat digunakan kembali. Anda mendefinisikannya sekali, sebagai warna merek Anda, ukuran font, atau jarak, dan kemudian menggunakannya di mana pun dibutuhkan. Mereka menyelamatkan Anda dari mengetik kode hex yang sama dan nilai piksel di bagian yang berbeda.

Manfaat terbesar mereka adalah betapa mudahnya mereka memperbarui. Jika Anda memperbarui variabel sekali, setiap tempat yang digunakan akan mencerminkan perubahan juga. Jadi, Anda tidak hanya menghindari mengulangi nilai yang sama secara manual di beberapa bagian, tetapi Anda juga dapat mengubah seluruh tampilan seluruh situs web dengan mengubah hanya satu nilai.

Di sinilah ia menjadi lebih baik: dengan Divi 5, Anda tidak perlu menulis kode apa pun untuk menggunakan variabel CSS. Variabel Desain Divi memungkinkan Anda menggunakannya dalam alur kerja visual, tanpa kode. Penasaran cara kerjanya? Terus membaca.

Daftar isi
  • 1 Apa variabel CSS?
    • 1.1 Bagaimana cara kerja variabel CSS
    • 1.2 Memahami Cascade Variabel CSS
    • 1.3 Menambahkan Nilai Fallback
  • 2 Cara tanpa kode untuk menggunakan variabel CSS di Divi 5
    • 2.1 Tentukan variabel CSS di Divi 5
  • 3 Bagaimana Divi 5 Membuat Alur Kerja Variabel CSS Mudah
    • 3.1 1. Buat kerangka desain Anda
    • 3.2 2. Gunakan preset grup opsi untuk gaya yang fleksibel
    • 3.3 3. Deklarasikan variabel CSS khusus untuk kontrol lebih lanjut
  • 4 Divi menawarkan pendekatan bawaan untuk variabel CSS

Apa variabel CSS?

Pikirkan variabel CSS sebagai label khusus yang Anda buat untuk kebiasaan desain Anda sendiri. Apa jari-jari perbatasan gambar Anda? Berapa jarak yang biasanya Anda tinggalkan di antara bagian -bagiannya? Apakah Anda memiliki warna tombol tanda tangan yang Anda gunakan di mana -mana? Anda dapat mengubah semua gaya unik itu menjadi variabel CSS.

Ini bukan nilai yang diketahui browser secara default. Semuanya kustom. Anda memutuskan namanya, menetapkan nilai pilihan Anda, dan menggunakannya di mana pun Anda inginkan. Ini seperti membuat steno Anda sendiri yang membuat gaya lebih cepat, lebih bersih, dan jauh lebih mudah untuk diperbarui nanti.

Mari kita ambil contoh. Misalkan Anda ingin warna utama situs Anda menjadi #007bff. Anda akan menyatakannya seperti ini:

:root {
--primary-color: #007bff;
}

Di sini, "–Primary-color" adalah nama variabel Anda, dan "#007bff" adalah nilainya. Anda baru saja menyimpan warna di dalam label khusus yang sekarang dapat dikenali oleh browser.

Untuk menggunakannya, Anda tidak menulis ulang kode hex. Anda memanggil variabel di dalam fungsi var () seperti ini:

 button {
background-color: var(--primary-color);
}

Itu satu baris kode memastikan tombol Anda selalu menarik nilai dari –Primary-color.

Sekarang, Anda dapat menggunakannya di mana pun dibutuhkan, dan ketika saatnya memperbarui warna merek Anda, tidak perlu menggali melalui lusinan file. Cukup ubah variabel sekali, dan setiap elemen yang digunakannya diperbarui secara otomatis. Misalnya, tombol, judul, dan perbatasan Anda semuanya digunakan-primary-color. Satu edit memperbarui semuanya.

Begitulah cara variabel CSS menyederhanakan pembaruan di seluruh situs.

Bagaimana Variabel CSS Bekerja

Untuk mendeklarasikan variabel CSS, sintaks dasar terlihat seperti ini:

.root {
--name: value;
}

Beberapa hal yang perlu diperhatikan. Pertama, variabel CSS selalu dimulai dengan dua tanda hubung ( -). Begitulah cara browser tahu itu khusus, sesuatu yang Anda tentukan untuk sistem desain Anda.

Properti CSS bawaan seperti ukuran font, warna, atau bantalan sudah memiliki arti. Browser tahu persis apa yang harus dilakukan dengan mereka. Tetapi properti khusus adalah label kosong sampai Anda menetapkan nilai. Anda membuat aturan desain Anda sendiri dalam proyek situs web, seperti –Primary-color, dan memberi tahu browser tentang apa artinya.

Di mana Anda mendefinisikan variabel CSS Anda juga membuat perbedaan besar.

Ketika Anda menempatkannya di dalam: pemilih root (seperti yang kami lakukan di atas), itu menjadi global. Itu berarti Anda dapat menggunakan variabel pada halaman dan elemen apa pun. Itu karena: Root menargetkan elemen tingkat atas dari HTML Anda, biasanya tag <html>.

Tetapi jika Anda mendefinisikan variabel yang sama di dalam kelas atau pemilih tertentu, itu hanya berfungsi di satu tempat itu. Seperti ini:

 .card {
--bg-color: #f4f4f4;
}

Di sini, –BG-Color hanya berlaku di dalam pemilih kartu. Coba gunakan di tempat lain, dan itu tidak akan muncul. Misalnya, di bawah ini Anda akan melihat dua kartu.

Variabel CSS yang dinyatakan secara lokal

Kartu 1 menggunakan variabel yang ditentukan secara lokal-kartu-BG yang dinyatakan di dalam wadah kartu. Variabel itu hanya berfungsi di dalam wadah itu. Itu tidak berlaku di kartu 3.

Variabel CSS yang ditentukan secara lokal tidak akan berfungsi pada wadah lain

Kartu 2, di sisi lain, menarik latar belakangnya dari –global-color, yang didefinisikan dalam: root. Itu sebabnya Card 4 juga mengambil warna yang sama. Ini memiliki akses ke variabel global.

Root CSS Variable Works

Sebagai praktik terbaik, jika Anda ingin konsistensi di seluruh situs Anda, selalu tentukan nilai CSS di: root. Bagaimana jika Anda mendefinisikan variabel secara lokal dan melupakannya, tetapi sekarang tidak berfungsi seperti yang diharapkan? Anda akan memecahkan masalah ini dengan menetapkan nilai fallback. Kami akan membicarakan hal ini sebentar lagi.

Memahami Cascade Variabel CSS

Anda mungkin terbiasa dengan istilah "Cascade." Nah, variabel CSS juga kaskade, tapi apa artinya ini?

Jika suatu variabel didefinisikan secara global (dalam: root) dan secara lokal (di dalam kelas atau wadah), browser akan selalu menggunakan yang lebih dekat ke elemen. Beginilah cara kerja cascading di CSS. Aturan yang lebih dekat menjadi prioritas.

Dan begitulah cara kerja mode gelap.

Misalnya, Anda dapat mendefinisikan –Text-color: Black in: root. Tapi di dalam wadah mode .dark, Anda dapat mendefinisikannya kembali sebagai putih. Jadi ketika pengguna beralih pada opsi mode gelap, browser akan menggunakan versi lokal di dalam .dark-mode, meskipun nama variabel tetap sama.

Contoh mode gelap

Ini memungkinkan Anda menjaga penamaan Anda konsisten sambil menyesuaikan gaya berdasarkan konteks. Ini adalah salah satu cara variabel CSS melampaui reusability sederhana. Mereka beradaptasi berdasarkan di mana dan bagaimana mereka digunakan.

Menambahkan Nilai Fallback

Terkadang, Anda mungkin merujuk variabel CSS yang tidak tersedia. Mungkin itu hanya didefinisikan di dalam bagian tertentu, atau dihapus karena kesalahan. Ketika itu terjadi, browser tidak tahu harus berbuat apa. Gaya yang bergantung pada variabel itu tidak akan diterapkan.

Anda dapat menambahkan nilai mundur langsung di dalam fungsi var () untuk mencegahnya. Ini berfungsi sebagai cadangan jika variabel asli tidak ada. Begini cara kerjanya:

 h1 {
color: var(--heading-color, #000); /* #000 - This is the fallback value. */
}

Ini memberitahu browser untuk menggunakan –HEADING-Color jika ada. Jika tidak, gunakan Black (#000) sebagai gantinya.

Fallback sangat berguna ketika membangun komponen yang dapat digunakan kembali atau bekerja di beberapa bagian di mana variabel mungkin tidak selalu tersedia. Mereka menjaga desain Anda stabil dan konsisten.

Anda bahkan dapat rantai fallback seperti warna: var (–accent-color, var (-primary-color, #333));

Di sini, browser memeriksa-warna-warna terlebih dahulu. Jika hilang, ia mencoba-warna primer. Jika itu juga hilang, itu default ke #333. Ini memberi gaya Anda jaring pengaman sehingga mereka terus render dengan benar bahkan jika beberapa nilai hilang.

Cara tanpa kode untuk menggunakan variabel CSS di Divi 5

Semua yang Anda lihat tentang variabel CSS (kontrol global, nilai -nilai yang dapat digunakan kembali, logika cascading) terdengar bagus, tetapi juga dilengkapi dengan tangkapan: Anda perlu menulis dan mengelola kode. Bagi banyak desainer, itu tidak ideal. Bagaimana jika Anda lebih suka desain visual? Itu berarti Anda tidak dapat menggunakan variabel CSS, bukan? Salah.

Divi 5 memberi Anda cara yang lebih cepat, lebih visual untuk bekerja dengan logika variabel CSS yang sama. Ini memperkenalkan variabel desain, alternatif no-kode untuk variabel CSS yang dibangun langsung ke dalam pembangun divi.

Berlangganan saluran YouTube kami

Variabel desain ( seperti variabel CSS) adalah nilai yang dapat digunakan kembali yang Anda tentukan sekali dan gunakan di seluruh situs Anda . Yang berbeda adalah bagaimana Anda melakukannya. Anda tidak mendefinisikannya di stylesheet situs web Anda tetapi di Variable Manager di dalam Divi Builder, secara visual.

Manajer Variabel di Divi 5

Seperti variabel CSS, Anda memberikan variabel desain nama dan menetapkan nilai. Setelah disimpan, itu tersedia dalam modul apa pun yang mendukung properti itu.

Menerapkan variabel yang disimpan juga mudah. Cukup cari ikon Variable Manager dengan melayang di atas opsi Pengaturan Modul, mengkliknya untuk mengisi semua variabel yang Anda simpan, dan memilih yang ingin Anda terapkan.

Bagian terbaik tentang variabel desain adalah bahwa bukan hanya nilai desain, tetapi Anda juga dapat menyimpan nilai konten yang berulang seperti gambar, tautan, dan string teks. Dengan cara ini, Anda mengelola konten berulang secara efektif dengan menggunakan kembali elemen konten umum di seluruh situs web Anda tanpa pekerjaan manual.

Simpan nilai konten yang berulang dalam variabel desain

Pelajari Segalanya Tentang Variabel Desain Divi 5

Tentukan variabel CSS di Divi 5

Apakah ini berarti variabel desain menggantikan variabel CSS? Tidak tepat.

Variabel desain sangat bagus untuk menyimpan nilai -nilai yang sering Anda gunakan, seperti warna merek, tetapi tidak setiap gaya perlu global. Anda tidak akan selalu ingin menyimpan setiap tweak kecil sebagai variabel desain, terutama ketika itu unik untuk satu halaman.

Katakanlah Anda membuat halaman arahan dengan bagian Pahlawan khusus. Tingginya berbeda dari hal lain di situs, dan Anda tidak mungkin menggunakannya kembali. Menyimpannya sebagai variabel desain bukanlah penggunaan terbaik dari perpustakaan global Anda. Dalam hal ini, mendefinisikan variabel CSS secara langsung di pengaturan halaman adalah pilihan yang lebih bersih.

Hal yang sama berlaku untuk tata letak yang kompleks atau satu kali. Mungkin Anda memerlukan warna sorotan khusus atau nilai jarak spesifik tata letak yang hanya relevan dalam konteks itu. Alih -alih memadati sistem Anda dengan variabel yang tidak akan pernah Anda gunakan kembali, Anda dapat mendefinisikan variabel CSS tepat di tempat Anda membutuhkannya.

Kami tidak ingin Anda mengganti variabel CSS dengan variabel desain. Kami ingin Anda menggunakan yang terbaik dari keduanya.

Itu sebabnya Divi 5 membuat penentu variabel CSS mudah. Anda dapat dengan mudah mendeklarasikan variabel CSS Anda sendiri di dalam pengaturan halaman> Lanjutan> CSS khusus , seperti yang Anda lakukan di CSS biasa.

Tentukan variabel CSS di Divi 5

Tapi kami menyederhanakan aplikasi mereka untuk Anda. Setelah ditentukan, Anda dapat menggunakan variabel -variabel ini di halaman itu. Buka modul apa pun, pilih CSS VAR dari dropdown unit canggih, dan masukkan nama variabel di dalam fungsi var ().

Pendekatan ini memberi Anda fleksibilitas saat dibutuhkan, tanpa memaksa Anda untuk melakukan segalanya pada sistem variabel desain visual. Ini adalah keseimbangan antara struktur dan kebebasan kreatif.

Menggunakan variabel CSS di Divi 5

Bagaimana Divi 5 Membuat Alur Kerja Variabel CSS Mudah

Sekarang Anda tahu apa itu variabel CSS dan bagaimana Divi 5 mendukung mereka secara visual, inilah mengapa ini benar -benar penting. Ini bukan hanya karena Divi memberi Anda dua cara untuk menggunakan variabel CSS. Itu karena itu membuat mereka terintegrasi dengan lancar dengan alur kerja Anda.

Anda dapat dengan mudah menggunakan variabel CSS dengan fitur -fitur kuat seperti variabel desain, preset grup opsi, dan unit canggih. Anda masih mendapatkan semua fleksibilitas dan skalabilitas CSS tradisional, tetapi tanpa menulis satu baris kode kecuali Anda memilih.

Mari kita berjalan melalui bagaimana Divi 5 menghidupkan alur kerja ini.

1. Buat kerangka desain Anda

Variabel desain sangat kuat karena Anda dapat membangun seluruh kerangka desain Anda secara visual, jadi menata halaman hanya membutuhkan beberapa klik. Kami sarankan memulai dengan elemen desain dasar Anda, seperti ukuran font, unit jarak, dan warna merek, jadi Anda memiliki semuanya di satu tempat.

Kemudian, Anda juga dapat menyimpan konten yang sering digunakan seperti string teks, URL, dan gambar. Misalnya, motif latar belakang umum yang berulang di berbagai bagian, tautan media sosial, email, alamat, dll.

Setelah Anda memiliki kerangka kerja, semuanya menjadi lebih mudah. Anda tidak perlu kembali ke root stylesheet untuk menemukan variabel atau mengingat nama yang tepat. Divi mengaturnya untuk Anda: Warna di tab Warna , font di tab Font , dan semua dapat diakses di dalam Variable Manager .

Variabel yang disimpan diatur dengan baik di Variable Manager

Dan ketika situs Anda membutuhkan pembaruan desain, Anda tidak akan membuang waktu mengedit modul dengan modul atau berburu melalui stylesheet yang panjang. Anda akan memperbarui nilai yang disimpan di Variable Manager sekali, dan perubahan Anda berlaku secara instan di setiap contoh.

Kontrol tingkat CSS yang sama, tetapi tanpa perlu menghafal, menulis, atau men-debug apa pun.

2. Gunakan preset grup opsi untuk gaya fleksibel

Preset grup opsi memberi Anda kontrol lebih rinci atas sistem desain Anda. Alih -alih menerapkan satu set gaya di situs Anda, Anda dapat membuat beberapa kelompok pilihan desain untuk berbagai kasus penggunaan, semua dibangun dari variabel desain dasar yang sama.

Di sini, Anda melapisi gaya. Anda mendefinisikan nilai inti Anda sekali di Variable Manager, kemudian membuat preset berbeda yang menarik dari nilai -nilai tersebut tetapi menerapkannya dengan cara yang sedikit berbeda. Jika Anda pernah memperbarui nilai variabel yang disimpan, perubahan secara instan mencerminkan semua preset Anda dan modul tempat diterapkan.

Sistem desain berbasis preset ini membantu Anda membuat kombinasi gaya yang tidak terbatas. Misalnya, Anda mungkin memiliki satu gaya heading untuk pahlawan beranda Anda dan yang lain untuk judul blog, keduanya menggunakan variabel ukuran font yang sama tetapi dengan jarak, bobot, atau transformasi teks yang berbeda.

Struktur tetap bersih. Gaya tetap konsisten. Dan saat dibutuhkan, Anda dapat mengganti preset apa pun di tingkat modul. Jadi Anda mendapatkan kontrol di seluruh sistem tanpa kehilangan kebebasan kreatif.

3. Deklarasikan variabel CSS khusus untuk kontrol lebih lanjut

Seperti yang Anda ketahui, Divi tidak mengunci Anda dari kendali canggih. Jika Anda ingin mendefinisikan variabel CSS Anda sendiri, Anda benar -benar dapat melakukannya melalui Pengaturan Halaman> Lanjutan> CSS Kustom. Tapi itu bukan bagian yang menyenangkan.

Yang menyenangkan adalah memungkinkan Anda untuk menggunakan fungsi CSS yang kuat seperti Clamp () dan Cal () (terima kasih kepada unit canggih) untuk membangun tata letak yang cairan dan responsif secara visual. Anda juga dapat menggunakan variabel CSS yang disimpan sebagai nilai untuk variabel desain Anda.

Ini membantu Anda membangun sistem desain yang lebih saling berhubungan. Logika CSS dan gaya visual Anda tidak ada lagi di silo terpisah. Anda dapat menentukan nilai sekali dalam CSS dan menariknya secara visual di mana pun dibutuhkan. Ini menjaga cairan alur kerja Anda, dapat diskalakan, dan mudah dipelihara.

Anda mungkin menemukan hal ini luar biasa, tetapi begitu Anda memahami cara kerjanya bersama, tidak ada jalan untuk kembali. Itu mengubah cara Anda merancang, berpikir, dan membangun. Apa yang dimulai sebagai sistem variabel dengan cepat menjadi bahasa desain Anda. Dan ya, alat -alat ini sangat kuat, tetapi dimaksudkan untuk dibentuk di sekitar proses Anda. Luangkan waktu Anda, jelajahi apa yang sesuai dengan gaya Anda, dan bangun alur kerja yang cocok untuk Anda.

Divi menawarkan pendekatan bawaan untuk variabel CSS

Merancang dengan variabel CSS yang digunakan untuk berarti memilih antara fleksibilitas dan kompleksitas. Divi 5 menghapus itu dan membawa kekuatan penuh variabel, kontrol visual, pembaruan di seluruh lokasi, dan logika berlapis ke dalam alur kerja yang intuitif dan dapat diskalakan.

Anda tidak harus memilih antara CSS khusus dan desain tanpa kode. Anda dapat mencampur, mencocokkan, dan mengembangkan sistem Anda saat proyek Anda tumbuh. Dan begitu Anda melihat betapa halus dan kuatnya hal ini, sulit membayangkan membangun dengan cara lain. Tetapi untuk itu, Anda perlu mengambil kendali ke tangan Anda.

Coba Divi 5 untuk diri sendiri dan bangun sistem desain yang bekerja dengan Anda, bukan melawan Anda.

Unduh Divi 5Learn Lainnya Tentang Divi 5