Bagaimana cara menambahkan variabel CSS untuk menyesuaikan tema anak WordPress

Variabel CSS, juga disebut sebagai properti kustom CSS, memungkinkan untuk digunakan kembali dengan mudah di lembar gaya CSS Anda. Jika Anda telah selesai bekerja dengan tema anak WordPress, Anda mungkin mendapati diri Anda melakukan banyak gaya dan menimpa hal-hal seperti warna, padding, dll. Jika Anda baru mengenal desain web, perlu disebutkan bahwa tidak ada yang salah dengan 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 praprosesor CSS, yang paling populer adalah SASS. Saya secara khusus menggunakan SASS untuk proyek yang lebih besar, dan bersama dengan variabel CSS sebagai bagian inti, ia menawarkan opsi lanjutan apa pun. Namun, jika Anda pernah bekerja dengan praprosesor sebelumnya, Anda tahu bahwa mereka perlu dikompilasi untuk menghasilkan CSS. Untuk alasan itu, tutorial ini akan fokus pada Variabel CSS, dan tidak akan membahas detail tentang praprosesor.

Variabel CSS adalah media yang menyenangkan. Untungnya, ada dukungan browser yang kuat. Sebelum berkomitmen untuk menggunakannya dalam produksi, pastikan untuk memeriksa Can I Use untuk memastikan mereka memiliki dukungan yang Anda butuhkan. Mereka lebih efisien daripada bekerja dengan CSS biasa tetapi tidak memerlukan pengaturan lanjutan seperti SASS. Browser melakukan "kompilasi", dan Anda tidak bergantung pada pengaturan dan lingkungan yang mengeluarkan CSS yang dikompilasi.

Pendekatan ini adalah proyek bagus yang cocok untuk hal-hal seperti menata tema anak WordPress sederhana. Dalam proyek seperti ini, cenderung ada kebutuhan untuk membuat pembaruan gaya untuk membuat tema bermerek. Saya menyukai kenyataan bahwa saya memiliki daftar penggantian gaya yang dapat dikelola dan tidak merasa perlu menyiapkan lingkungan yang mengkompilasi SASS ke CSS.

Dapatkan tema Genesis Framework & StudioPress gratis!

Saat Anda menghosting situs Anda di Flywheel, Anda akan memiliki akses ke lebih dari 30 tema WordPress premium (termasuk Genesis!) langsung dari dasbor kami yang menyenangkan. Nilainya lebih dari $2.000 yang bisa Anda mulai hanya dengan $15/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 berlebihan untuk mengetik nilai warna yang sama setiap kali. Plus, bagaimana jika Anda ingin membuat perubahan pada salah satu nilai warna di set? Misalnya, mungkin warna biru perlu sedikit lebih gelap. Ini terjadi sepanjang waktu. Ya, tentu saja, ada tepercaya temukan dan ganti. Menyesuaikan nilai di satu tempat, bagaimanapun, lebih efisien saat membuat perubahan global ini dan saat variabel digunakan kembali.

Berikut adalah tampilan variabel CSS :

:root {
--text-black: #232525;
}

header {
color: var(--text-black);
}

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

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

Fungsi var()

Bagaimana sebenarnya variabel digunakan? Ini cukup sederhana. Pertama, variabel dideklarasikan dan kemudian digunakan dalam set aturan CSS yang diperlukan. Lingkup merupakan hal yang penting untuk diketahui. Variabel perlu dideklarasikan dalam pemilih CSS yang berada dalam cakupan yang dimaksudkan. Dalam banyak kasus, Anda memerlukan variabel untuk tersedia dalam lingkup global, sehingga variabel tersebut dapat diakses oleh semuanya. Anda dapat menggunakan :root atau selektor body untuk lingkup global. Namun, mungkin ada contoh di mana Anda perlu membatasi ruang lingkup, dan ingin bekerja dengan variabel yang dicakup secara lokal.

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

Sintaks var() cukup mudah:
var(variable-name, value)

:root {
--light-gray: #eeeeee
--text-black: #434344
}

.sidebar {
--background-color: var(--light-gray);
--color: var(--text-black);
}

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

Inspektur web (dalam hal ini Chrome) memungkinkan Anda 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 lembar gaya:

:root {
--light-gray: #eeeeee;
--text-black: #434344;
}

.sidebar {
background-color: var(--light-gray);
color: var(--text-black);
}

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

:root {
--gutter: 5px;
}

section {
padding: var(--gutter);
}

@media (min-width: 600px) {
:root {
--gutter: 15px;
}
}

Berikut adalah contoh variabel yang dapat ditemukan dalam lingkup lokal. Kami hanya menyentuh lingkup global sejauh ini, jadi Anda akan melihat bahwa segala sesuatunya tidak berada di akarnya. 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.

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

Contoh di atas mencakup dasar-dasar variabel CSS. Konsep-konsep ini dapat diterapkan ke 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 memerlukan praprosesor.

Selanjutnya: Plugin

Unduh ebook ini untuk daftar plugin yang paling kami rekomendasikan untuk pengembang! Kami menemukan semua plugin ini mudah digunakan, tidak terlalu berat kinerjanya di situs Anda, dan benar-benar andal.

Suka artikel ini? Coba salah satu dari ini:

• Cara membuat layout kartu menggunakan CSS Grid Layout
• Cara menggabungkan kisi Flexbox dan CSS untuk tata letak yang efisien
• Kustomisasi sederhana untuk tema anak Genesis Anda