Generator Variabel CSS
Buat properti kustom CSS (variabel) dengan editor visual. Hasilkan blok :root dengan pemilih warna dan preset.
Tentang alat ini
Properti khusus CSS (variabel CSS) adalah nilai yang dapat digunakan kembali yang dapat Anda tentukan sekali dan gunakan di seluruh lembar gaya Anda. Daripada menghardcode warna, ukuran, atau nilai lainnya langsung ke CSS Anda, Anda dapat menyimpannya sebagai variabel dalam blok :root dan mereferensikannya dengan sintaks var(--nama). Ini memudahkan pemeliharaan token desain yang konsisten di seluruh proyek Anda dan menyederhanakan perubahan tema global—cukup perbarui nilai variabel dan perubahan diterapkan di mana pun ia digunakan.
Menggunakan generator variabel CSS ini, Anda dapat membuat dan mengatur properti khusus secara visual tanpa menulis kode secara manual. Tambahkan variabel satu per satu, pilih dari templat tema yang telah ditetapkan untuk mode gelap, mode terang, atau warna merek, kemudian tentukan nama, jenis (warna, ukuran, angka, atau string), dan nilai untuk setiap variabel. Alat ini secara otomatis memformat output sebagai blok CSS :root yang valid dengan komentar inline yang menunjukkan cara menggunakan setiap variabel dalam gaya Anda. Setelah dibuat, salin CSS langsung ke clipboard Anda atau unduh sebagai file.
Alat ini sangat berguna untuk pembuatan sistem desain, pemeliharaan tema multi-merek, atau pengelolaan skala spasi dan tipografi yang konsisten. Baik Anda membangun situs web kecil atau perpustakaan komponen besar, memiliki set variabel CSS terpusat mengurangi duplikasi kode dan membuat pembaruan desain lebih cepat dan dapat diandalkan.
Pertanyaan yang Sering Diajukan
Implementasi Kode
# Generate CSS :root block from a dictionary of variables
def generate_css_variables(variables: dict) -> str:
lines = [":root {"]
for name, value in variables.items():
var_name = name if name.startswith("--") else f"--{name}"
lines.append(f" {var_name}: {value};")
lines.append("}")
return "\n".join(lines)
# Example: dark mode theme
dark_theme = {
"--bg-primary": "#0f0f0f",
"--bg-secondary": "#1a1a1a",
"--text-primary": "#ffffff",
"--text-secondary": "#a0a0a0",
"--accent": "#6366f1",
"--border-radius": "8px",
"--font-size-base": "16px",
}
print(generate_css_variables(dark_theme))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.