Cara Menambahkan Variabel CSS untuk Menyesuaikan Tema Anak WordPress

Variabel CSS, juga disebut sebagai properti khusus CSS, memungkinkan penggunaan kembali dengan mudah di lembar gaya CSS Anda.

Jika Anda telah menyelesaikan pekerjaan dengan tema anak WordPress, Anda mungkin mendapati diri Anda melakukan banyak gaya dan mengesampingkan hal-hal seperti warna, padding, dll. Jika Anda baru mengenal desain web, perlu disebutkan bahwa tidak ada salahnya menggunakan polos CSS. Variabel CSS bersifat opsional dan saat Anda semakin mahir, Anda akan mulai melihat bagaimana variabel akan menguntungkan Anda.

Ini tidak dimaksudkan untuk menggantikan preprosesor CSS, yang paling populer adalah SASS. Banyak pembangun secara khusus menggunakan SASS untuk proyek yang lebih besar, dan bersama dengan Variabel CSS sebagai bagian inti, SASS menawarkan banyak opsi lanjutan.

Namun, jika Anda pernah bekerja dengan preprosesor sebelumnya, Anda tahu bahwa mereka perlu dikompilasi untuk menghasilkan CSS. Oleh karena itu, tutorial ini akan berfokus pada Variabel CSS, dan tidak akan membahas detail tentang preprosesor.

Variabel CSS adalah media yang menyenangkan, dan untungnya, ada dukungan browser yang kuat. Sebelum berkomitmen untuk menggunakan Variabel CSS dalam produksi, pastikan untuk mencentang Can I Use untuk memastikan mereka memiliki dukungan yang Anda butuhkan.

Variabel CSS lebih efisien daripada bekerja dengan CSS biasa tetapi tidak memerlukan penyiapan lanjutan seperti SASS. Browser melakukan "kompilasi", dan Anda tidak bergantung pada penyiapan dan lingkungan yang menampilkan CSS yang dikompilasi.

Pendekatan ini adalah proyek yang cocok untuk hal-hal seperti menata tema anak WordPress sederhana. Untuk proyek seperti ini, cenderung ada kebutuhan untuk melakukan pembaruan gaya untuk membuat tema bermerek. Variabel CSS dapat membantu, karena mereka menyediakan daftar penggantian gaya yang dapat dikelola dan tidak memerlukan lingkungan khusus untuk mengompilasi SASS ke CSS.

Dapatkan Genesis Framework & Tema StudioPress Gratis!

Pelanggan WP Engine mendapatkan akses ke rangkaian tema WordPress premium yang menjadi standar di setiap paket! Anda dapat mulai membangun situs berikutnya hanya dengan $20/bulan! Pelajari lebih lanjut di sini.

Cara Menggunakan Variabel CSS

Saat menggunakan warna tertentu untuk mempertahankan merek, satu persyaratan umum adalah memiliki palet warna merek yang dapat digunakan berulang kali. Menjadi mubazir untuk mengetikkan nilai warna yang sama setiap saat. Selain itu, bagaimana jika Anda ingin mengubah salah satu nilai warna di set?

Misalnya, mungkin warna biru harus sedikit lebih gelap. Ini terjadi sepanjang waktu. Ya, tentu saja, ada pencarian dan penggantian yang terpercaya. Namun, menyesuaikan nilai di satu tempat lebih efisien saat membuat perubahan global ini dan saat variabel digunakan kembali.

Berikut tampilan Variabel CSS :

 [css] :root { --text-black: #232525; } header { color: var(--text-black); } [/css]

Saat saya merampingkan alur kerja untuk menata tema anak WordPress, saya telah menambahkan variabel ke file styles.css saya. Ini hanyalah "daftar pendek" dan karena lebih banyak ditambahkan, penamaan setiap variabel secara efisien menjadi penting.

 [css] :root { --white: #ffffff; --black: #232525; --mid-gray: #eeeeee; --brand-red: #e50000; } [/css]

Fungsi var()

Bagaimana sebenarnya variabel digunakan? Ini cukup sederhana. Pertama, variabel dideklarasikan dan kemudian digunakan dalam set aturan CSS yang diperlukan.

Ruang lingkup merupakan hal yang penting untuk diperhatikan. Variabel perlu dideklarasikan dalam pemilih CSS yang berada dalam cakupan yang diinginkan. Dalam banyak kasus, Anda memerlukan variabel untuk tersedia dalam lingkup global, dengan cara itu mereka dapat diakses oleh semuanya. Anda dapat menggunakan :root atau pemilih body untuk lingkup global. Akan tetapi, mungkin ada kasus di mana Anda perlu membatasi ruang lingkup, dan ingin bekerja dengan variabel yang dicakup secara lokal.

Sangat mudah untuk menemukan variabel; mereka memiliki dua garis di depan mereka. Dua tanda hubung (–) harus disertakan.

Sintaks var() cukup mudah:

 var(variable-name, value) [css] :root { --light-gray: #eeeeee --text-black: #434344 } .sidebar { --background-color: var(--light-gray); --color: var(--text-black); } [/css]

Alih-alih menyesuaikan warna di banyak tempat, nilai variabel disesuaikan di satu tempat.

Inspektur web (dalam hal ini Chrome) memungkinkan Anda untuk memeriksa dan melihat variabel mana yang digunakan.

Contoh berikut pertama-tama mendefinisikan properti kustom global bernama --light-gray dan --text-black . Fungsi var() dipanggil, yang menyisipkan nilai properti khusus nanti di stylesheet:

 [css] :root { --light-gray: #eeeeee; --text-black: #434344; } .sidebar { background-color: var(--light-gray); color: var(--text-black); } [/css]

Perlu disebutkan bahwa variabel bisa sangat berguna saat bekerja dengan breakpoint CSS. Dengan menggunakan variabel cakupan global di breakpoint yang berbeda, hal-hal seperti padding dan gaya berguna lainnya dapat disesuaikan untuk berbagai ukuran.

 [css] :root { --gutter: 5px; } section { padding: var(--gutter); } @media (min-width: 600px) { :root { --gutter: 15px; } } [/css]

Berikut adalah contoh variabel yang dapat ditemukan dalam lingkup lokal. Kami hanya menyentuh lingkup global sejauh ini, sehingga Anda akan melihat bahwa hal-hal yang tidak di root. Ini adalah gaya untuk pesan peringatan. Ada warna teks peringatan yang dideklarasikan di sini yang hanya berguna untuk kelas ini. Juga, perlu dicatat bahwa calc juga dapat digunakan.

 [css] .warning { --warning-text: #ff0000; --gap: 20; color: var(--warning-text); margin-top: calc(var(--gap) * 1px); } [/css]

Contoh di atas mencakup dasar-dasar Variabel CSS. Konsep-konsep ini dapat diterapkan pada tema WordPress khusus atau CSS khusus lainnya yang Anda tulis. Variabel memiliki keunggulan dibandingkan CSS biasa dan akan membantu Anda bekerja lebih efisien saat membuat perubahan di seluruh situs. Mereka memungkinkan stylesheet yang terorganisir dengan lebih baik tanpa perlu preprocessor.

Dorong Kebebasan Berkreasi Dengan WP Engine

WP Engine mendukung kebebasan berkreasi di WordPress. Produk perusahaan, yang tercepat di antara semua penyedia WordPress, mendukung 1,5 juta pengalaman digital. Lebih dari 200.000 situs teratas di dunia menggunakan WP Engine untuk memperkuat pengalaman digital mereka daripada siapa pun di WordPress. Temukan lebih lanjut kami di wpengine.com atau hubungi perwakilan kami hari ini!